我试图在两个ngFor循环中显示两个不同的ng-content.
但正如 this回答中所述,Angular无法多次投影ng-content.
但正如 this回答中所述,Angular无法多次投影ng-content.
我尝试了this解决方案,但这不允许我多次投影我的内容,只是根据ngIf条件在不同的地方显示它.
这是我的实际代码：
示例父组件(使用app-table的任何组件).这就是我想要做的.
<app-table [data]="myData">
<div lineHeader let-line>
{{line.name}}
</div>
<div lineContent let-element>
{{element.name}}
</div>
</app-table>
子组件(app-table).在这里,我可以做任何事情,而父组件保持相同的工作方式.
<div *ngFor="let line of data">
<ng-content select="[lineHeader]"></ng-content>
<div *ngFor="let element of line">
<ng-content select="[lineContent]"></ng-content>
</div>
</div>
在您的情况下,最好的选择是使用ngTemplateOutlet转换ng-template,如：
<app-table [data]="myData">
<ng-template #lineHeader let-line>
<div>
{{line.name}}
</div>
</ng-template>
<ng-template #lineContent let-element>
<div>
{{element.name}}
</div>
</ng-template>
</app-table>
APP-table.component.ts
@Component({
selector: 'app-table',template: `
<div *ngFor="let line of data">
<ng-container *ngTemplateOutlet="lineHeaderTmpl,context: { $implicit: line }"></ng-container>
<div *ngFor="let element of line.values">
<ng-container *ngTemplateOutlet="lineContentTmpl,context: { $implicit: element }"></ng-container>
</div>
</div>
`
})
export class AppTableComponent {
@Input() data: any;
@ContentChild('lineHeader') lineHeaderTmpl: TemplateRef<any>;
@ContentChild('lineContent') lineContentTmpl: TemplateRef<any>;
}
