(kątowa 2+) Korzystanie NG-zawartość w * ngFor, nie ma dostępu do zmiennych pętli

Question

Jak mogę transclude/Project w szczelinę, która jest w pętli, i przewidywana zawartość stanie uzyskać dostęp do zmiennych pętli?

Say Mam składnik bazowy z następującym

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

i składnik podrzędny, który wykorzystuje gniazdo dołączony szablon "gniazdo"

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

HTML chciałbym generowany jest

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

Ale to, co rzeczywiście się dzieje, że „dane” nie zostało zdefiniowane w komponencie dziecka, co sprawia, sens. Czy jest jakikolwiek sposób, żeby to działało?

Answer 1

Korzystanie TemplateRef można deklarować zmienne szablonów działających między dwoma składnikami deklaratywnie, na poziomie szablonów. Poniższe rozwiązanie nie jest w pełni zgodne z twoją infrastrukturą "automatową", ale może być przydatne do dalszego badania.

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

ja też stworzył Plunker demo ...