Question

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

这是我想要获得的：

桌面：

+-----------------------------------------------------------+
|   Header 1   |   Header 2   |   Header 3   |   Header 4   | 
+-----------------------------------------------------------+
|   field 1-1  |   field 1-2  |   field 1-3  |   field 1-4  |
+-----------------------------------------------------------+
|   field 2-1  |   field 2-2  |   field 2-3  |   field 2-4  |
+-----------------------------------------------------------+
|   field 3-1  |   field 3-2  |   field 3-3  |   field 3-4  |
+-----------------------------------------------------------+

手机：

+---------------------+
| Header 1: field 1-1 |
| Header 2: field 1-2 |
| Header 3: field 1-3 |
| Header 4: field 1-4 |
+---------------------+
| Header 1: field 2-1 |
| Header 2: field 2-2 |
| Header 3: field 2-3 |
| Header 4: field 2-4 |
+---------------------+
| Header 1: field 3-1 |
| Header 2: field 3-2 |
| Header 3: field 3-3 |
| Header 4: field 3-4 |
+---------------------+
| Header 1: field 4-1 |
| Header 2: field 4-2 |
| Header 3: field 4-3 |
| Header 4: field 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>

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

1 个答案: