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>

所以：

使用模板
正确重复行
但我无法显示项属性;行未绑定到＆＃34;项目＆＃34;在* 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

如何在组件外部定义模板

1 个答案: