* ngIf i * ngFor na <td></td> element

Mam sytuację, w której potrzebuję dyrektyw * ngIf i * ngFor dla tego samego elementu. Znalazłem wiele odpowiedzi na stackoverlow, ale nie ma dla tego typu sytuacji.* ngIf i * ngFor na <td></td> element

Mam tabeli, w którym mam pętli w tablicy obiektów i dynamicznie napisać komórki w nagłówku:

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

Chcę pokazać/ukryć jeśli obiekt zawiera widoczną wartość true. Jak mogę to osiągnąć?

Źródło

2016-11-29 Igor Janković

Możesz użyć do tego elementu pomocnika <ng-container>.

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

Nie jest dodawany do DOM.

Źródło

2016-11-29 08:24:26

Wielkiej odpowiedź. Dziękuję Ci. Czy mógłbyś wyjaśnić trochę, co jest dokładnie ng-kontenerem w tej sytuacji. Użyłem go do transclusion w komponentach. –

Działa dobrze, na wypadek gdyby ktoś miał problemy z tagiem tabeli. Inną alternatywą jest zastąpienie tabeli etykietą div –

Cool answer - wszystko działa. Po prostu chcę wskoczyć i powiedzieć, że to podejście Ang 2 jest kompletne bs lol. Y U DO TEGO ANG? – Marko

Odpowiedź Güntera Zöchbauera jest świetna. Znalazłem jeszcze jedno rozwiązanie.

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

Ale ten zostanie przeanalizowany w html.

Źródło

2016-11-29 08:32:53

Można użyć szablon elementu także:

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

to będzie pracować dla Ciebie.

Źródło

2016-11-29 08:58:33

BTW nazywa się teraz "" w kanciastym 4. – msanford

Można również użyć ngclass dla tego

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

Źródło

2016-11-29 09:36:17 Sriram

* ngIf i * ngFor na <td></td> element

Odpowiedz

Powiązane problemy