角度过滤表答案

【问题标题】：Angular filtered table角度过滤表
【发布时间】：2017-02-22 07:58:09
【问题描述】：

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

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>

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

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

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

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

【问题讨论】：

您可以编写自己的Pipe 以在视图中显示过滤结果..
ng-container 或模板可能会对您有所帮助
@PankajParkar 由于性能问题，Angular 文档对此提出警告。

标签： angular templates angularjs-filter

【解决方案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>

【讨论】：

好的，这真是太棒了。我不得不去查找 ng-container，它是“一个逻辑容器，可用于对节点进行分组，但不会在 DOM 树中作为节点呈现。”太完美了。

【解决方案2】：

可能的方法：

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

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

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

原因是性能和小型化..

所以这取决于你。 :)

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

【讨论】：