web-dev-qa-db-ja.com

* ngFor内で* ngIFを使用できません：angular2

私は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を一緒に使用する提案はありますか？

jsontypescriptangularangular2-directivesangular2-services
6
firasKoubaa

次を使用できます。

*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>
11
Thierry Templier

別の解決策は、カスタムフィルタリングを作成することです パイプ ：

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

8
dfsq

同じタグの*ngIfと*ngForはサポートされていません。そのうちの1つには、明示的な<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>
8
Günter Zöchbauer