我有角材料表共同的部件(该结构是完全一样的)。所以我想用NG-内容,并更改了一些列:
@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>
但结果是很奇怪的。我只是在最后一排了投影。
你应该用纳克模板与ngTemplateOutlet。下面为我工作。
这是为什么NG-内容可能无法正常工作angulars-content-projection-trap-and-why-you-should-consider-using-template-outlet-instead
@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>