5

Ich benutze angular2 und i'im Binding-Daten von einem Dienst, das Problem ist, wenn ich Daten lade ich sollte es durch eine ID filtern, das ist was ich tun sollte:Kann nicht verwenden * ngIF innerhalb * ngFor: angular2

<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> 

und dies ist die Daten:

[ 
    { "id": 1, "value": "Fenêtre" ,"class":"md-primary" ,"label":"Fenêtre" ,"checked":"true"}, 
    { "id": 2, "value": "Porte Fenêtre" ,"class":"" ,"label":"Porte Fenêtre" } 

] 

durch die Art, wie ich nur die Daten mit id = 1 will in Kauf genommen werden, aber ich sehe diesen Fehler :

EXCEPTION: Template parse errors: 
Parser Error: Bindings cannot contain assignments at column 14 in [ngIf item.id=1] in [email protected]:16 (" 
     <md-radio-button 
       *ngFor="#item of items_list" 
       [ERROR ->]*ngIf="item.id=1" 
       value="{{item.value}}" class="{{item.class}}" checked="{{item.check"): [email protected]:16 

also irgendein Vorschlag, ngif und ngfor zusammen zu verwenden?

+0

einfach, noch einfacher als die Antworten: die Daten in Ihrer Komponente filtern und Sie geben es an die Aussicht, keine Notwendigkeit, es in der Aussicht zu tun. –

Antwort

7

Sie könnten nutzen die folgenden:

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

statt

*ngIf="item.id=1" 

Sie versuchen, etwas in die id Eigenschaft (Operator =) anstelle der Prüfung seines Wertes (Operator == oder ===) zuweisen .

Darüber hinaus werden sowohl ngFor als auch ngIf für dasselbe Element nicht unterstützt. Sie könnten versuchen, so etwas wie das:

<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> 

oder

<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> 
+0

Danke, aber das Problem bleibt bestehen AUSNAHME: TypeError: Kann die Eigenschaft 'id' von undefined in [item.id === 1 in RadioFormesType1Component @ 11: 16] nicht lesen – firasKoubaa

+0

In der Tat müssen Sie ein Unterelement erstellen, um die 'ngIf' anzuwenden . "NgFor" und "ngIf" auf demselben Element werden nicht unterstützt ... –

3

*ngIf und *ngFor auf dem gleichen Tag werden nicht unterstützt. Sie müssen das Langformular mit einem expliziten <template>-Tag für eines von ihnen verwenden.

Update

Statt <template> Verwendung <ng-container> die die gleiche Syntax wie inline zu verwenden, ermöglicht *ngIf und *ngFor

+0

yeah die beste Lösung ist zu verwenden