Durante il gioco con Angular 2, ho riscontrato un problema: apparentemente non posso inserire due direttive strutturali (ngFor
, ngIf
) sullo stesso elemento DOM.
In Angular 1 questo funzionava. Per example:Angolare 2 - Due direttive strutturali sullo stesso elemento DOM
<div ng-repeat="item in items" ng-if="$even">{{item}}</div>
quando provo qualcosa di simile con Angular 2:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<div *ngFor="#item of items; #e = even" *ngIf="e">{{item}}</div>
</div>
`,
directives: []
})
export class App {
constructor() {
this.items = ["a","b","c"]
}
}
Non succede nulla. Neanche un errore.
Se metto la direttiva ngIf
su un elemento figlio, it works:
<div *ngFor="#item of items; #e = even"><div *ngIf="e">{{item}}</div></div>
Ma il problema è che non voglio aggiungere un elemento figlio solo per questo. Se, ad esempio, si tratta di un tag <tr>
all'interno di una tabella, l'aggiunta di uno div
all'interno renderà il DOM strano.
So che Angular 2 è ancora in beta, ma mi chiedo se è un bug, una funzionalità o forse c'è un modo non documentato per ottenere ciò che voglio.
AFAIK questo non è supportato. Tuttavia, l'utilizzo del modulo esplicito '' per una direttiva e del modulo breve '* ngIf' per l'altra sul contenuto del modello dovrebbe funzionare. –
@ GünterZöchbauer, ho provato il modulo 'template' esplicito, senza successo – yarons
Puoi aggiungere il codice di questo tentativo? –