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

39 浏览
0 Comments

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

这个问题已经在以下回答中有了解答:

*ngIf 和 *ngFor 在同一元素上使用造成错误

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

 {{item.label}}

这是数据：

[
  { "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 ("
        ]*ngIf="item.id=1"
                value="{{item.value}}" class="{{item.class}}" checked="{{item.check"): RadioFormesType1Component@10:16

有没有建议将ngif和ngfor一起使用？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

另一种解决方案是创建自定义过滤器管道 ：\n

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]));
  }
}

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

 {{item.label}}

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

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

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

0
0 Comments

你可以使用以下内容：

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

代替

*ngIf="item.id=1"

你试图将某些东西分配给 id 属性（运算符 =）而不是测试其值（运算符 == 或 ===）。

此外，同一元素上的 ngFor 和 ngIf 都不受支持。你可以尝试像这样：

  
    {{item.label}}

或

0