(Góc 2+) Sử dụng ng-content trong * ngFor, không thể truy cập các biến vòng

Question

Làm thế nào tôi có thể chuyển đổi/dự án thành một vùng nằm trong vòng lặp và có nội dung dự kiến ​​có thể truy cập vào các biến vòng lặp?

Nói rằng tôi có một thành phần cơ bản như sau

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

Và một thành phần trẻ có sử dụng khe nhúng "khe"

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

HTML Tôi muốn tạo ra là

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

Nhưng những gì thực sự xảy ra là "dữ liệu" không được xác định trong thành phần con, mà làm cho giác quan. Có cách nào tôi có thể làm cho nó hoạt động như thế này không?

Answer 1

Sử dụng TemplateRef có thể khai báo biến mẫu hoạt động giữa hai thành phần được khai báo, ở cấp mẫu. Giải pháp sau không hoàn toàn phù hợp với cơ sở hạ tầng "khe" của bạn nhưng có thể hữu ích để điều tra thêm.

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

Tôi cũng đã tạo ra một Plunker demo ...