1

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

我将在表中搜索 3 个列值，并使用过滤器处理该部分。我不确定在表格中显示搜索结果，以及如何使用 typeahead 插件处理表格中的“单击一行”等事件。此外，我发现我需要做很多样式才能以正确的表格格式显示数据， 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;
  })
 );
}

这工作得很好，但我想要在没有 '--->' 的情况下以表格形式显示 'state' 对象字段。

更新-1

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

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

<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;">
4

0 回答 0