* ngIf और * ngFor <td></td> तत्व

Question

मेरे पास ऐसी स्थिति है जहां मुझे एक ही तत्व पर * ngIf और * ngFor निर्देश की आवश्यकता है। मुझे स्टैक ओवरलो पर बहुत सारे जवाब मिले लेकिन इस तरह की स्थिति के लिए कोई भी नहीं।

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

मैं/छिपाने दिखाने के लिए अगर वस्तु सच को दिखाई सेट होता हैं:

मैं एक मेज जिसमें मैं ऑब्जेक्ट की श्रेणी के माध्यम से पाशन कर रहा हूँ और गतिशील रूप से शीर्ष लेख में कोशिकाओं बारे में है। इसे कैसे प्राप्त किया जा सकता है?

Answer 1

आप इसके लिए <ng-container> सहायक तत्व का उपयोग कर सकते हैं।

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

यह डोम में नहीं जोड़ा गया है।

Answer 2

गुंटर ज़ोचबॉयर का जवाब बहुत अच्छा है। मुझे एक और समाधान भी मिला है।

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

लेकिन यह एक HTML के अंदर पार्स किया जाएगा।

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

यह आप के लिए काम करेंगे:

Answer 3

आप टेम्पलेट तत्व भी उपयोग कर सकते हैं।

Answer 4

तुम भी है कि

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