无法在 *ngFor 中使用 *ngIF：angular2

Question

我正在使用Angular2，并从服务中绑定数据，问题是当我加载数据时，我需要按ID进行过滤，这是我应该做的：

<md-radio-button
        *ngFor="#item of items_list"
        *ngIf="item.id=1"
        value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
</md-radio-button>

这是数据：

[
  { "id": 1, "value": "Fenêtre" ,"class":"md-primary" ,"label":"Fenêtre" ,"checked":"true"},
  { "id": 2, "value": "Porte Fenêtre" ,"class":"" ,"label":"Porte Fenêtre" }

]

顺便说一下，我只希望接受ID为1的数据，但是我看到了以下错误：

EXCEPTION: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 14 in [ngIf item.id=1] in RadioFormesType1Component@10:16 ("
        <md-radio-button
                *ngFor="#item of items_list"
                [ERROR ->]*ngIf="item.id=1"
                value="{{item.value}}" class="{{item.class}}" checked="{{item.check"): RadioFormesType1Component@10:16

有没有建议同时使用ngif和ngfor？

- firasKoubaa

---

简单来说，比答案还要简单：在组件中过滤数据并将其传递到视图，完全不需要在视图中进行操作。 - Eric Martinez

Answer 1

您可以使用以下内容：

*ngIf="item.id===1"

代替

*ngIf="item.id=1"

你试图使用赋值运算符=将某物赋给id属性，而不是测试其值（运算符==或===）。

此外，在同一个元素上同时使用ngFor和ngIf是不支持的。你可以尝试像这样：

<div *ngFor="#item of items_list">
  <md-radio-button
      *ngIf="item.id===1"
      value="{{item.value}}" class="{{item.class}}"
      checked="{{item.checked}}">
    {{item.label}}
  </md-radio-button>
</div>

或者

<template ngFor #item [ngForOf]="items_list">
  <md-radio-button
      *ngIf="item.id===1"
      value="{{item.value}}" class="{{item.class}}"
      checked="{{item.checked}}">
    {{item.label}}
  </md-radio-button>
</template>

- Thierry Templier

---

谢谢，但问题仍然存在。异常：TypeError: 在[RadioFormesType1Component@11:16中的item.id === 1]中无法读取未定义的属性'id'。 - firasKoubaa

实际上，您需要创建一个子元素来应用 ngIf。同一元素上的 ngFor 和 ngIf 不受支持... - Thierry Templier

<template> tag not working instead I used <ng-container> - Amit Shah

Answer 2

另一个解决方案是创建自定义的过滤管道：

import {Pipe} from 'angular2/core';

@Pipe({name: 'filter'})
export class FilterPipe {
  transform(value, filters) {

    var filter = function(obj, filters) {
      return Object.keys(filters).every(prop => obj[prop] === filters[prop])
    }

    return value.filter(obj => filter(obj, filters[0]));
  }
}

并在组件中像这样使用它：

<md-radio-button
  *ngFor="#item of items_list | filter:{id: 1}"
  value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
</md-radio-button>

需要在组件上注册自定义管道：

@Component({
  // ...
  pipes: [FilterPipe]
})

演示： http://plnkr.co/edit/LK5DsaeYnqMdScQw2HGv?p=preview

- dfsq

---

Angular 4 的小修正，您需要将管道添加到包含您想要使用该管道的组件的模块的 declarations 数组中。 - gkri

Answer 3

在同一个标签上使用*ngIf和*ngFor是不支持的。您需要使用长格式，并为其中之一使用显式的<template>标签。

更新

改用<ng-container>替代<template>，这样可以像内联*ngIf和*ngFor一样使用相同的语法。

<ng-container *ngFor="#item of items_list">
  <md-radio-button
        *ngIf="item.id=1"
        value="{{item.value}}" class="{{item.class}}" checked="{{item.checked}}"> {{item.label}}
  </md-radio-button>
</ng-container>

- Günter Zöchbauer

---

是的，最好的解决方案是使用<template>。 - firasKoubaa

自从更新以来，<ng-container> 运行得非常好。 - Mitch Wilkins

谢谢，非常好用！ - Yevgniy Shvartsman