json 不能在 *ngFor 中使用 *ngIF : angular2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36196358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't use *ngIF inside *ngFor : angular2
提问by firasKoubaa
i'm using angular2 and i'im binding data from a service , the probleme is when i'm loading data i should filter it by an id , , this is what i'm supposed to do :
我正在使用 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>
and this is the data:
这是数据：
[
{ "id": 1, "value": "Fenêtre" ,"class":"md-primary" ,"label":"Fenêtre" ,"checked":"true"},
{ "id": 2, "value": "Porte Fenêtre" ,"class":"" ,"label":"Porte Fenêtre" }
]
by the way i want just the data with id =1 to be accepted , but i'm seeing this error:
顺便说一下，我只想接受 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
so any suggestion to use ngif and ngfor together ?
那么有什么建议可以一起使用 ngif 和 ngfor 吗？
回答by Thierry Templier
You could use the following:
您可以使用以下内容：
*ngIf="item.id===1"
instead of
代替
*ngIf="item.id=1"
You try to assign something into the idproperty (operator =) instead of testing its value (operator ==or ===).
您尝试将某些内容分配给id属性 (operator =)，而不是测试其值（operator==或===）。
Moreoever both ngFor and ngIf on the same element aren't supported. You could try something like that:
此外，不支持同一元素上的 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>
or
或者
<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>
回答by Günter Z?chbauer
*ngIfand *ngForon the same tag are not supported. You need to use the long form with an explicit <template>tag for one of them.
*ngIf并且*ngFor不支持在同一个标签上。您需要<template>为其中之一使用带有显式标签的长格式。
update
更新
Instead of <template>use <ng-container>which allows to use the same syntax as inline *ngIfand *ngFor
而不是<template>use <ng-container>which 允许使用与 inline*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>
回答by dfsq
Another solution is to create custom filtering 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]));
}
}
and use it like this in component:
并在组件中像这样使用它：
<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>
Custom pipe needs to be registered on the component:
需要在组件上注册自定义管道：
@Component({
// ...
pipes: [FilterPipe]
})
