Question

我想以表格格式显示提前搜索类型的结果，而not_as list下拉列表。我跟着跟着 - valor github

我将在表格中搜索3个库仑值，并使用过滤器对该部分进行处理。我不确定在表格中显示搜索结果以及如何使用typeahead插件处理表格中的“点击一行”等事件。同时我看到我需要做很多样式来以适当的表格格式显示数据，将使用自定义css顺利输入插件的css工作吗？

我有以下模板 -

<ng-template #customItemTemplate>
<div class="col-lg-12 sb-ir-popover-table-div sb-ir-popover-table-layout">
      <table class="table-hover table-striped">
        <thead>
            <th class="sb-ir-popover-table-th">name</th>
            <th class="sb-ir-popover-table-th">region</th>
        </thead>
          <tr>
        <td>{{state.name}}</td> // I get error here - ERROR TypeError: Cannot read property 'name' of undefined(…)
        <td>{{state.region}}</td>
     </tr>
      </table>
</div>
</ng-template>

如何在自定义模板中获取'state.name'/'region'或搜索结果'state'对象？

我的输入是这样的 -

<input [(ngModel)]="asyncSelected"
     [typeahead]="dataSource"
     (typeaheadLoading)="changeTypeaheadLoading($event)"
     (typeaheadNoResults)="TypeaheadNoResults($event)"
     (typeaheadOnSelect)="typeaheadOnSelect($event)"
     typeaheadOptionsLimit="15"
     [optionsListTemplate]="customItemTemplate"
     placeholder="Locations loaded with timeout"
     class="form-control">

在上面提到的链接中，我看到以下方法调用 -

[class.active]="isActive(match)"
(mouseenter)="selectActive(match)"
(click)="selectMatch(match, $event)"

想要检查是否需要使用自定义实现覆盖所有方法调用（包括上面的方法），以支持表格显示数据的事件。

早些时候我使用了以下内容 -

输入 -

typeaheadOptionField="combined"

这是'组合'，它被显示为选项，现在我想将这些选项更改为带有原始列的表格形式。

组件 -

public statesComplex: any[] = [
{id: 1, name: 'Alabama', region: 'South'}, {id: 2, name: 'Alaska',    region: 'West'}, {
  id: 3,
  name: 'Arizona',
  region: 'West'
},
{id: 4, name: 'Arkansas', region: 'South'}];

public constructor() {
this.dataSource = Observable
  .create((observer: any) => {
    // Runs on every search
    observer.next(this.asyncSelected);
  })
  .mergeMap((token: string) => this.getStatesAsObservable(token));
}

public getStatesAsObservable(token: string): Observable<any> {
  return Observable.of(
  this.statesComplex.filter((state: any) => {
    state['combined'] = state.name+'--->'+state.region;
    return state.combined.toLowerCase().indexOf(token.toLowerCase())>-1;
  })
);
}

这很好用，但我希望没有'---＆gt;'的'状态'对象字段的表格显示

UPDATE-1

我错过了自定义模板中的循环，并且在添加之后我能够以表格格式获取所有状态值。但它不会过滤，当我输入。我应该使用哪些属性/方法，以便我可以获得过滤结果。正如之前发布的那样，我在构造函数中有一个过滤器，只要结果在下拉视图中就可以正常工作。

我现在在自定义模板中关注 -

<tr *ngFor='let state of statesComplex'>//missed this for loop earlier
        <td>{{state.name}}</td>
        <td>{{state.region}}</td>
</tr>

我在参考链接中看到了以下属性 -

typeahead="item as item.title + ' (' + item.name + ')' for item in data | filter:{title:$viewValue}"

这有助于过滤吗？你能解释一下$ viewValue以及我如何在这里使用我现有的过滤逻辑吗？此外，我怀疑是否需要在自定义模板中强制使用下面的行，以便在那里显示过滤结果。

<template ngFor let-match let-i="index" [ngForOf]="matches">
<template [ngTemplateOutlet]="itemTemplate || bsItemTemplate"
                                                      [ngOutletContext]="
{item:match.item, index:i, match:match, query:query}" style="color: black;">

angular4 / ngx-bootstrap Typeahead：optionsListTemplate with table view

0 个答案: