不能在 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 吗？

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>

Answer 2

不支持同一标签上的

*ngIf 和 *ngFor。您需要为其中之一使用带有显式 <template> 标记的长格式。

更新

而不是 <template> 使用 <ng-container> 允许使用与内联 *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>

Answer 3

另一个解决方案是创建自定义过滤 pipe:

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

不能在 ngFor 中使用 ngIF : angular2

Can't use ngIF inside ngFor : angular2

json

typescript

angular

angular2-directives

angular2-services

不能在 *ngFor 中使用 *ngIF : angular2

Can't use *ngIF inside *ngFor : angular2

json

typescript

angular

angular2-directives

angular2-services

不能在 ngFor 中使用 ngIF : angular2

Can't use ngIF inside ngFor : angular2