Angular：如何在多行上复制 templateRef？

Question

我正在尝试构建一个组件以在小型显示器上显示每行重复标题的表格。我不知道如何重复标题。

这是我想要得到的：

桌面：

+------------------------------ -------------+
|标题 1 |标题 2 |标题 3 |标题 4 |
+-------------------------------------------------- ----------+
|字段 1-1 |字段 1-2 |字段 1-3 |字段 1-4 |
+-------------------------------------------------- ----------+
|字段 2-1 |字段 2-2 |字段 2-3 |字段 2-4 |
+-------------------------------------------------- ----------+
|字段 3-1 |字段 3-2 |字段 3-3 |字段 3-4 |
+-------------------------------------------------- ----------+

手机：

+----------+
|标题 1：字段 1-1 |
|标题 2：字段 1-2 |
|标题 3：字段 1-3 |
|标题 4：字段 1-4 |
+----------+
|标题 1：字段 2-1 |
|标题 2：字段 2-2 |
|标题 3：字段 2-3 |
|标题 4：字段 2-4 |
+----------+
|标题 1：字段 3-1 |
|标题 2：字段 3-2 |
|标题 3：字段 3-3 |
|标题 4：字段 3-4 |
+----------+
|标题 1：字段 4-1 |
|标题 2：字段 4-2 |
|标题 3：字段 4-3 |
|标题 4：字段 4-4 |
+----------+

标记是：

<my-table [items]="items">
    <my-col>
        <my-label>Header 1</my-label>
        <my-field let-item>{{item.field1}}</my-field>
    </my-col>
    <my-col>
        <my-label>Header 2</my-label>
        <my-field let-item>{{item.field2}}</my-field>
    </my-col>
    <my-col>
        <my-label>Header 3</my-label>
        <my-field let-item>{{item.field3}}</my-field>
    </my-col>
    <my-col>
        <my-label>Header 4</my-label>
        <my-field let-item>{{item.field4}}</my-field>
    </my-col>
</my-table>

然后我定义了以下组件：

@Component({
    selector: 'my-label',
    template: `<ng-template #tpl><ng-content></ng-content></ng-template>`
})
export class MyLabelComponent {
    @ViewChild("tpl") template;
}

@Component({
    selector: 'my-col',
    template: '<ng-content></ng-content>'
})
export class MyTableColumnComponent {
    @Input("class") className: string = "col";
    @ContentChild(MyLabelComponent) label;
}

然后是桌子：

@Component({
    selector: 'exa-table2',
    template: `
<div class="my-table">
    <div class="my-head">
        <ng-container *ngFor="let col of columns">
            <div class="{{col-className}}">
                <ng-container *ngTemplateOutlet="col.label.template"></ng-container>
            </div>
        </ng-container>
    </div>
    <div class="my-body">
        <div class="my-row" *ngFor="let item of items">
            <ng-container *ngFor="let col of columns">
                <div class="small {{col-className}}">
                    <ng-container *ngTemplateOutlet="col.label.template"></ng-container>
                </div>
            </ng-container>
        </div>
    </div>
</div>
    `,
    styleUrls: ['./exa-table.component.scss'],
})
export class MyTableComponent {
    @Input() items: any[];

    @ContentChildren(MyTableColumnComponent) columns: QueryList<MyTableColumnComponent>;

}

我现在卡住了，因为我无法在每一行上重复。 据我了解，无法克隆 templateRef (https://stackoverflow.com/a/50080838/10226165)，只会显示最后一个“副本”。

您对我可以如何进行有任何想法吗？

Answer 1

试试这个：

<table>
    <ng-container *ngFor="let row of rows">
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
    <tr>
      <td>{{row.data1}}</td>
      <td>{{row.data2}}</td>
    </tr>
    </ng-container>
  </table>