* ngIf und * ngFor on <td></td> element

Ich habe eine Situation, wo ich * ngIf und * ngFor für das gleiche Element brauchen. Ich habe viele Antworten auf dem Stack gefunden, aber keine für diese Art von Situation.* ngIf und * ngFor on <td></td> element

Ich habe eine Tabelle, in der ich durch die Anordnung von Objekten bin Looping und dynamisch Zellen in Kopf schreiben:

<table border="1" width="100%"> 
     <thead> 
      <tr> 
       <td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td> 
      </tr> 
     </thead> 
     <tbody> 
      ... 
     </tbody> 
    </table>

Ich möchte zum Anzeigen/Verbergen, wenn das Objekt sichtbar Satz auf true enthält. Wie kann ich das erreichen?

Quelle

2016-11-29 Igor Janković

Sie können dafür das <ng-container> Hilfselement verwenden.

<ng-container *ngFor="let item of headerItems" > 
<td *ngIf="item.visible">{{ item?.name }}</td> 
</ng-container>

Es wird nicht zum DOM hinzugefügt.

Quelle

2016-11-29 08:24:26

Große Antwort. Vielen Dank. Kannst du bitte ein bisschen erklären, was genau ng-container in dieser Situation ist. Ich habe es für die Einbeziehung in Komponenten verwendet. –

Es funktioniert gut, wenn jemand Probleme mit dem Tag hat. Eine andere Alternative ist die Tabelle mit einem div-Tag zu ersetzen –

Coole Antwort - alles funktioniert. Ich möchte nur einspringen und sagen, dass dieser Ang 2 Ansatz abgeschlossen ist bs lol. MACHEN SIE DIESE ANG? – Marko

Günter Zöchbauers Antwort ist großartig. Ich habe auch eine weitere Lösung gefunden.

<td *ngFor="let item of headerItems" [hidden]="!item.visible">{{ item?.name }}</td>

Aber dieses wird in HTML geparst werden.

Quelle

2016-11-29 08:32:53

Sie können auch Vorlage Element verwenden:

<template ngFor let-item [ngForOf]="headerItems "> 
    <td *ngIf="item.visible">{{ item?.name }}</td> 
</template>

Dies wird für Sie arbeiten.

Quelle

2016-11-29 08:58:33

BTW das heißt jetzt in Winkel 4 "". – msanford

Sie können auch für die Verwendung ngclass dieser

.hidecell{ 
    display:none; 
    } 
<td *ngFor="let item of headerItems" [ngClass]="{hidecell:item.isVisible}"> 
{{ item?.name }} 
</td>

Quelle

2016-11-29 09:36:17 Sriram

* ngIf und * ngFor on <td></td> element

Antwort

Verwandte Themen