(Açısal 2+) ng-content öğesinde ngFor kullanılarak, döngü değişkenlerine erişilemiyor

Question

Bir döngü içinde yer alan ve yansıtılan içeriğin döngü değişkenlerine erişebilmesini nasıl sağlarım?

aşağıdaki

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

bir baz bileşeni Ve ekleme yuvası kullanan bir çocuk bileşeni olduğunu varsayalım "yuvası" Ben oluşturulan edilmesini istediğiniz HTML

olduğunu

<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> 

Ama aslında olan şey, "veri" nin çocuk bileşeninde tanımlanmamasıdır. duygusu. Böyle çalışabilmem için herhangi bir yolu var mı?

Answer 1

TemplateRef kullanarak, iki bileşen arasında etkili olan şablon değişkenlerini, şablon düzeyinde bildirmek mümkündür. Aşağıdaki çözüm, "alan" altyapınızla tam olarak eşleşmiyor, ancak daha fazla araştırma için yararlı olabilir.

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() { } 
} 

Ben de nereye * çocuğu aradığınız bir Plunker demo ...