Question

我有以下组件：

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

现在我想使用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)"

或使用现有组件。见线程：

Answer 2

您可以使用：

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

Answer 3

将ng-template与ngIf一起使用，如果要使用条件迭代数组。下面是示例代码。你可以找到working version here

<ng-template ngFor let-othermode [ngForOf]="modes">
<button *ngIf="othermode!=mode">
  {{ othermode }}
</button>
</ng-template>