Angular 已过滤 table

Question

我有这个完全合法的数据源：

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

我在 table 中显示它是这样的：

<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>

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

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

我想过将行嵌套在某个东西中（div，也许吧？），但我不确定这是否有效 HTML。

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

Answer 1

可能的方式：

使用 Pipe -> 您不需要副本
使用过滤数组

Angular 更喜欢将数据过滤到另一个 "copy".

的方式

https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filterpipe-or-orderbypipe-

原因是性能和 minifiying..

所以这取决于你。 :)

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

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>

Angular 已过滤 table

Angular filtered table

angular

templates

angularjs-filter