在ngFor内按值过滤项目而不编写管道

Question

我有以下组件:

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

现在我想用a ngFor来显示所有模式的按钮,modes除了存储的当前模式mode.我有以下代码:

<button *ngFor="let othermode of modes">
  {{ othermode }}
</button>

我总是希望显示两个按钮,包含剩余的两个模式.我试过这个:

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
  {{ othermode }}
</button>

但它不起作用.我看到的所有问题都需要为此功能编写自定义管道,但是没有任何简单的方法来过滤字符串数组,只使用这些值？

Answer 1

使用过滤功能过滤数据:

filterFunction(your_collection): any[] {  
    return your_collection.filter(i => i.field.value === filterKey);
}

并在模板中:

*ngFor="let value of filterFunction(datasource)"

或者使用存在的组件.看线程:

/sf/answers/3505023371/

Answer 2

您可以使用 ：

<ng-container *ngFor="let othermode of modes">
  <button *ngIf="othermode!=mode">
    {{ othermode }}
  </button>
</ng-container>