如何将内容投影到mat-table列

Question

链接到stackblitz

我有角材料表的常见组件(结构完全相同).所以我想使用ng-content并更改一些列:

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns = ['test', 'name'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}

const ELEMENT_DATA: { name: string } = [
  {name: 'Hydrogen'},
  {name: 'Helium'},
  {name: 'Lithium'},
  {name: 'Beryllium'},
  {name: 'Boron'},
];

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="test">
      <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
      <mat-cell *matCellDef="let element">

        <ng-content select="[test]"></ng-content>

      </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

这就是为什么我想像布局一样使用它并投射一些数据.所以我有另一个组件:

<table-basic-example>

  <div test>
    test
  </div>

</table-basic-example>

但结果很奇怪.我在最后一排得到了投影.

链接到stackblitz

Answer 1

您应该将ng-template与ngTemplateOutlet一起使用。下面为我​​工作。

这就是为什么ng内容可能无法正常工作的原因角度内容投影陷阱，为什么您应该考虑使用模板插座

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  @Input() templateRef: TemplateRef<any>;
  displayedColumns = ['test', 'name'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
}

const ELEMENT_DATA: { name: string } = [
  {name: 'Hydrogen'},
  {name: 'Helium'},
  {name: 'Lithium'},
  {name: 'Beryllium'},
  {name: 'Boron'},
];

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="test">
      <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
      <mat-cell *matCellDef="let element">

        <!-- using ng-template with ngTemplateOutlet instead of ng-content -->
        <ng-template [ngTemplateOutlet]="templateRef"></ng-template>

      </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

<table-basic-example>

  <div test [templateRef]="columnTemplateRef">
    <ng-template #columnTemplateRef>
      test
    </ng-template>
  </div>

</table-basic-example>