不能在 *ngFor 内使用 *ngIF ：angular2 [重复]

Posted 2023-02-22

【中文标题】不能在 *ngFor 内使用 *ngIF ：angular2 [重复]

【英文标题】：Can't use *ngIF inside *ngFor : angular2 [duplicate]

【发布时间】：2016-07-11 19:37:14

【问题描述】：

我正在使用 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 吗？

【问题讨论】：

简单，甚至比答案更简单：过滤组件中的数据并将其传递给视图，根本不需要在视图中进行。

【参考方案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>

【讨论】：

谢谢，但问题仍然存在 例外：TypeError: Cannot read property 'id' of undefined in [item.id===1 in RadioFormesType1Component@11:16]

实际上你需要创建一个子元素来应用ngIf。不支持同一元素上的 ngFor 和 ngIf...

<template> 标签不起作用，我使用了<ng-container>

【参考方案2】：

不支持同一标签上的*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>

【讨论】：

是的，最好的解决方案是使用

自更新 就像一个魅力

谢谢，效果很好！

【参考方案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

【讨论】：

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