Question

您好我正在尝试使用ng-bootstrap为角度制作一个预先输入。我已经创建了一个服务来从服务中获取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">

我的预先输入的代码如下所示 -

export class NgbdTypeaheadTemplate {
public model: any;
searchList: Search[];
constructor(private searchservice: SearchService) { }

ngOnInit() {
  this.searchList = this.searchservice.getSearch();
}

search = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(200),
    withLatestFrom(this.searchList),
    map(([term, list]) => term === '' ? []
      : list.filter((v:any) => list.filter(v => v.searchitem.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))) 

    );
 }

我创建的服务看起来像这样 -

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对象，但我在list.filter上收到错误error TS2339: Property 'filter' does not exist on type '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>

点击searchitem后，我想更改网址，以便显示该网页。

例如。如果我点击牛仔裤并点击search按钮，我应该可以重定向到https://www.google.co.in给定的网址

Answer 1

我有同样的解决方案。

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

我在stackblitz上创建了一个演示版。我希望这会有助于/指导你/他人。

html代码

<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>

ts文件代码

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');
    }
}

用于typeahead的ng-bootstrap角度过滤器json对象

1 个答案: