Question

我在component.ts中得到了大约15个不同的查找列表值，并将每个值分配给一个列表，并将其绑定到html中的<select>。效果很好。

要使代码更简洁，是否有这样的东西？

<mat-form-field class="example-full-width">
              <mat-label>Preferred Job</mat-label>
              <mat-select>
                 <mat-option *ngFor="let job of designationList.filter(x=>x.lookupName === 'Designation')" [value]="job.id">
                  {{job.lookupValue}}
                </mat-option> 
              </mat-select>
            </mat-form-field>

种类为where或filter的条件可以直接应用于<select>中，这样我就不能再为每个下拉列表使用单独的列表了？

Answer 1

您可以将自定义函数用于此变量。

component.ts

faster_rcnn_inception

component.html

filteredDesignationList(loopUpName: string){
    return this.designationList.filter(x=>x.lookupName === loopUpName)"
}

Answer 2

是的，您应该使用管道来过滤数据，而不是直接使用过滤器。

<mat-option *ngFor="let job of designationList|filter-pipe" [value]="job.id">
              {{job.lookupValue}}
</mat-option>

看看这个，了解如何实现管道：

https://angular.io/guide/pipes

ngFor Angular 6中的LINQ

2 个答案: