Как определить внешний шаблон шаблона

Question

Я пытаюсь создать компонент таблицы (со стандартными функциями), где строки должны быть определены как шаблон.

На данный момент я попробовал этот способ (код упрощен):

1) родительский компонент

@Component({ 
    selector: 'simple-grid', 
    template: `<table><tbody> 
     <ng-container *ngFor="let item of items; let i = index"> 
      <template 
       [ngTemplateOutlet]="template" 
       [ngOutletContext]="{'item': item, 'i': i}"> 
      </template> 
    </ng-container> 
     </tbody></table> 
    ` 
}) 
export class SimpleGridComponent { 
    @Input() 
    items: any[] = []; 
    @ContentChild(TemplateRef) 
    template: any; 
} 

2) Использование:

@Component({ 
    selector: 'simple-grid', 
    template: ` 
     <simple-grid [items]="users" > 
      <template> 
      <tr [class.even]="i%2==0" [class.odd]="i%2!=0"> 
       item: {{item?.id}} {{ someProperty }} {{id}} 
      </tr> 
      </template> 
     </simple-grid>` 
}) 
MyPage{ 
    public users: Users = [{id: 1, name='one'}, {id: 2, name='two' }]; 
    public someProperty: string = 'dummy'; 
} 

Результат:

<table> 
    <tbody> 
    <tr> 
     item: dummy 
    </tr> 
    <tr> 
     item: dummy 
    </tr> 
    <tbody> 
</table> 

так:

• Шаблон используется

• Ряды правильно повторил

• , но я не смог показать запись свойства; строки не привязаны к «элементу» в * ngFor, но сам MyPage. ps: если я выбираю строку с Augury, в консоли $ a.context правильно содержит элемент и индекс.

Как я могу решить эту проблему?

Answer 1

Я нашел, что для синтаксиса шаблона атрибут «let-» должен использовать элементы, доступные в контексте шаблона.

Итак, я исправил код таким образом:

@Component({ 
    selector: 'simple-grid', 
    template: ` 
    <simple-grid [items]="users" > 
     <template let-item="item" let-index="i"> 
     <tr [class.even]="index%2==0" [class.odd]="index%2!=0"> 
      item: {{item?.id}} {{ someProperty }} {{id}} 
     </tr> 
     </template> 
    </simple-grid>` 
}) 
MyPage{ 
    public users: Users = [{id: 1, name='one'}, {id: 2, name='two' }]; 
} 

пример в plunker: https://plnkr.co/edit/PwSpjy4KTYjstGWTWP24?p=preview