(कोणीय 2+) * ngFor में ng-content का उपयोग करके, लूप चर का उपयोग नहीं कर सकता

Question

मैं लूप के भीतर एक स्लॉट में कैसे स्थानांतरित/प्रोजेक्ट कर सकता हूं, और अनुमानित सामग्री लूप चरों तक पहुंचने में सक्षम है?

मैं निम्नलिखित

<tr *ngFor="let data of items"> 
    <td>{{data.title}}</td> 
    <ng-content select="[slot]"></ng-content> 
</tr> 

के साथ एक आधार घटक और एक बच्चे के घटक ट्रांसक्लुजन स्लॉट का उपयोग करता है कहो "स्लॉट"

<parent [items]="items"> 
    <ng-container slot> 
     <td>{{data.category}}</td> 
     <td>{{data.number}}</td> 
    </ng-container> 
</parent> 

एचटीएमएल मैं उत्पन्न करना चाहते हैं

है

<tr> 
    <td>{{data.title}}</td> 
    <td>{{data.category}}</td> 
    <td>{{data.number}}</td> 
</tr> 

लेकिन वास्तव में क्या होता है कि "डेटा" को बच्चे घटक में परिभाषित नहीं किया जाता है, जो बनाता है समझ। क्या ऐसा कोई तरीका है जिससे मैं इसे इस तरह काम कर सकूं?

Answer 1

TemplateRef का उपयोग करना टेम्पलेट स्तर पर दो घटकों के बीच अभिनय टेम्पलेट चर घोषित करना संभव है। निम्नलिखित समाधान आपके "स्लॉट" आधारभूत संरचना से पूरी तरह मेल नहीं खाता है लेकिन आगे की जांच के लिए उपयोगी हो सकता है।

list.component.ts

import { Component, Input, ContentChild, TemplateRef } from '@angular/core'; 

@Component({ 
    selector: 'list', 
    template: ` 
    <tr class="box" *ngFor="let data of items"> 
     <td>{{data.title}}</td> 
     <ng-template 
     [ngTemplateOutlet]="template" 
     [ngTemplateOutletContext]="{ $implicit: data }"> 
     </ng-template> 
    </tr>` 
}) 
export class ListComponent { 
    @Input() items; 
    @ContentChild(TemplateRef) template: TemplateRef; 
    constructor() { } 
} 

wrapper.component.ts

import { Component, ContentChild, TemplateRef } from '@angular/core'; 

@Component({ 
    selector: 'wrapper', 
    template: ` 
    <table> 
     <list [items]="items"> 
     <ng-template let-data> 
      <td>{{data.category}}</td> 
      <td>{{data.number}}</td> 
     </ng-template> 
     </list> 
    </table>` 
}) 
export class WrapperComponent { 
    items = [ 
    { title: 'T1', category: 'C1', number: 'N1' }, 
    { title: 'T2', category: 'C2', number: 'N2' }, 
    { title: 'T3', category: 'C3', number: 'N3' } 
    ]; 
    @ContentChild(TemplateRef) template: TemplateRef; 
    constructor() { } 
} 

मैं भी एक Plunker demo ...