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>

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

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

我想过把行嵌入某个东西（div，也许？），但我不确定它是否是有效的HTML。

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

Answer 1

您可以使用以下内容：

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

Answer 2

可能的方法：

使用Pipe - ＆gt;你不需要副本
使用过滤后的数组

Angular更喜欢将数据过滤到另一个＆＃34; copy＆＃34;。

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

原因是表现和迷你......

所以由你来决定。：）

如果您需要任何示例，请给我一个评论，我会给您一个插件。

角度过滤表

2 个答案: