Angular 用于typeahead的ng引导角度过滤器json对象

嗨，我正在尝试使用ng引导为angular制作一个typeahead。我创建了一个服务来从该服务获取JSON数据

import { Search } from './search';
export const SEARCH: Search[] = [
    {
        id:1,
        searchitem: 'jeans',
        url: 'https://www.google.co.in',
    },
    {
        id:2,
        searchitem: 'Shirts',
        url: 'https://www.facebook.com',
    }
];

因此，我的HTML输入标记如下所示-

<input type="search" placeholder="Search" aria-label="Search" 
[(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
[inputFormatter]="formatter">

import { Injectable } from '@angular/core';
import { Search } from '../data/search';
import { SEARCH } from '../data/searchdata';

@Injectable()
export class SearchService {

  constructor() { }

  getSearch(): Search[]{
    return SEARCH;
  }
}

当用户开始键入时，我想在自动完成中显示

searchitem

对象，但我在

列表中得到了错误。筛选器作为
error TS2339:属性“filter”在类型“Search”中不存在。
请帮助

更新-
我有这张表格-

<form class="form-inline my-2 my-lg-0">
  <ng-template #rt let-r="result" let-t="term">
    {{ r.searchitem}}
  </ng-template>
  <input 
    type="search" 
    class="form-control mr-sm-2" 
    #instance="ngbTypeahead"
    placeholder="Search" 
    aria-label="Search" 
    [(ngModel)]="model" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    >
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>


{{r.searchitem}}
搜寻

单击searchitem，我想更改url，以便显示该页面

例如，如果我点击牛仔裤并点击
search
按钮，我应该能够重定向到
https://www.google.co.in
给定的url
我有一个相同的解决方案

您还可以将ng模板用于结果显示的自定义模板，并将对象用作模型

我已经在上创建了一个演示。我希望这将对你/其他人有所帮助/指导

html代码


{{r.searchitem}}
搜寻

ts文件代码

功能=[{
id:1，
searchitem:'牛仔裤'，
网址：'https://www.google.co.in',
},
{
id:2，
searchitem:'衬衫'，
网址：'https://www.facebook.com',
}
]
公共模式：任何；
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（200），
distinctUntilChanged（），
合并（this.focus$），
合并（this.click$.pipe（过滤器（（）=>！this.instance.isPopupOpen（））），
映射（term=>（term==''？此功能：
this.features.filter（v=>v.searchitem.toLowerCase（）.indexOf（term.toLowerCase（））>-1））.slice（0,10））
);
格式化程序=（x:{
searchitem:字符串
})=>x.searchitem；
搜索url（url）{
如果（url）{
打开（url，“U空白”）；
}
}
我有一个同样的解决方案

您还可以将ng模板用于结果显示的自定义模板，并将对象用作模型

我已经在上创建了一个演示。我希望这将对你/其他人有所帮助/指导

html代码


{{r.searchitem}}
搜寻

ts文件代码

功能=[{
id:1，
searchitem:'牛仔裤'，
网址：'https://www.google.co.in',
},
{
id:2，
searchitem:'衬衫'，
网址：'https://www.facebook.com',
}
]
公共模式：任何；
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（200），
distinctUntilChanged（），
合并（this.focus$），
合并（this.click$.pipe（过滤器（（）=>！this.instance.isPopupOpen（））），
映射（term=>（term==''？此功能：
this.features.filter（v=>v.searchitem.toLowerCase（）.indexOf（term.toLowerCase（））>-1））.slice（0,10））
);
格式化程序=（x:{
searchitem:字符串
})=>x.searchitem；
搜索url（url）{
如果（url）{
打开（url，“U空白”）；
}
}
Thank@Krishna it works:），如果搜索后出现提交按钮，并在JSON中搜索url，该怎么办。这将使我的任务完成。我不明白你的意思。你好@Krishna，请查看问题中的更新部分你好@Krishna谢谢你，非常感谢你的帮助谢谢@Krishna它工作：），如果搜索后出现提交按钮，它在JSON中搜索url会怎么样。这将使我的任务完成。我不明白你的意思。嗨@Krishna，请查看问题中的更新部分嗨@Krishna非常感谢，非常感谢你的帮助
<form class="form-inline my-2 my-lg-0">
  <ng-template #rt let-r="result" let-t="term">
    {{ r.searchitem}}
  </ng-template>
  <input 
    type="search" 
    class="form-control mr-sm-2" 
    #instance="ngbTypeahead"
    placeholder="Search" 
    aria-label="Search" 
    [(ngModel)]="model" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    >
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

<ng-template #rt let-r="result" let-t="term">
   {{ r.searchitem}}
</ng-template>
<input 
    type="search" 
    #instance="ngbTypeahead"
    placeholder="Search" 
    aria-label="Search" 
    [(ngModel)]="model" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt"
    [inputFormatter]="formatter"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="searchUrl(model.url)">Search</button>

features = [{
        id: 1,
        searchitem: 'jeans',
        url: 'https://www.google.co.in',
    },
    {
        id: 2,
        searchitem: 'Shirts',
        url: 'https://www.facebook.com',
    }
]




public model: any;



search = (text$: Observable < string > ) =>
    text$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        merge(this.focus$),
        merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
        map(term => (term === '' ? this.features :
            this.features.filter(v => v.searchitem.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

formatter = (x: {
    searchitem: string
}) => x.searchitem;

searchUrl(url) {
    if (url) {
        window.open(url, '_blank');
    }
}