角度过滤表

Question

我有完全合法的数据来源：

public data = [
  { Field1: 1, Field2: 'One' },
  { Field1: 2, Field2: 'Two' },
  { Field1: 3, Field2: 'Three' },
  { Field1: 4, Field2: 'Four' }
];

我将其显示在这样的表中：

<table>
  <thead>
    <th>Field1</th>
    <th>Field2</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td>{{item.Field1}}</td>
      <td>{{item.Field2}}</td>
    </tr>
  </tbody>
</table>

现在假设我想过滤我的数组。如果我有固定的行数，我可以在< code>tr元素上使用< code>*ngIf来选择显示/不显示一个项目，但是Angular不允许在一个元素上有两个结构指令。

我知道我可以使用< code>Array.filter简单地过滤源数组，但是这样会产生一个副本，如果我的数组大得多，这可能会成为一个问题。

我想将该行嵌套在某个东西(< code>div)中，也许？)，但我不确定这是不是有效的HTML。

那么，使用Angular 2动态过滤数据的正确方法是什么？

Answer 1

可能的方法：

• 使用管道 -

Angular更喜欢将该数据过滤为另一个“副本”的方式。

https://angular.io/docs/ts/latest/guide/pipes.html#！#无过滤管道或orderbypipe-

原因是性能和迷你…

所以这取决于你。:)

如果你需要任何例子，给我一个评论，我会给你一个笨蛋。

Answer 2

您可以使用以下内容：

<table>
  <thead>
    <th>Field1</th>
    <th>Field2</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of data">
      <tr *ngIf="someCondition">
         <td>{{item.Field1}}</td>
         <td>{{item.Field2}}</td>
      </tr>
    </ng-container>
  </tbody>
</table>