Angular 8: 在嵌套结构中不显示 ng-template 的内容
Angular 8: Not Showing the content of ng-tmplate in nested structure
我有一个模型,其结构中有一个列表和一个枚举 属性,如下所示:
export class myModel {
Items: any[]=[];
ItemsType: ItemType;
}
并且我想在模板中使用 ng-container 和 ng-template 显示我的模型列表,但 ng-template 的内部内容没有显示在我的结果中
我的模板是这样的:
<nb-accordion>
<ng-container *ngFor="let model of myModels">
<ng-template [ngIf]="model.itemType == 0">
<nb-accordion-item *ngFor="let item of model.Items">
<nb-accordion-item-header>
...some content
</nb-accordion-item-header>
<nb-accordion-item-body>
...some content
</nb-accordion-item-body>
</nb-accordion-item>
</ng-template>
<ng-template [ngIf]="model.itemType == 1">
<nb-accordion-item *ngFor="let item of model.socialNetworkItems">
<nb-accordion-item-header>
...some content
</nb-accordion-item-header>
<nb-accordion-item-body>
...some content
</nb-accordion-item-body>
</nb-accordion-item>
</ng-template>
</ng-container>
</nb-accordion>
你能帮帮我吗?
使用 model.ItemsType
而不是 model.itemtype
是一个基本错误
StackBlitz 演示:https://stackblitz.com/edit/angular-nested-template-reference
对于那些认为 ng-template
不能与 *ngIf
一起使用的人,请参阅 中已接受的答案,其中语法糖格式 *ngIf
被替换为 [ngIf]
指令(但不建议)。
我有一个模型,其结构中有一个列表和一个枚举 属性,如下所示:
export class myModel {
Items: any[]=[];
ItemsType: ItemType;
}
并且我想在模板中使用 ng-container 和 ng-template 显示我的模型列表,但 ng-template 的内部内容没有显示在我的结果中 我的模板是这样的:
<nb-accordion>
<ng-container *ngFor="let model of myModels">
<ng-template [ngIf]="model.itemType == 0">
<nb-accordion-item *ngFor="let item of model.Items">
<nb-accordion-item-header>
...some content
</nb-accordion-item-header>
<nb-accordion-item-body>
...some content
</nb-accordion-item-body>
</nb-accordion-item>
</ng-template>
<ng-template [ngIf]="model.itemType == 1">
<nb-accordion-item *ngFor="let item of model.socialNetworkItems">
<nb-accordion-item-header>
...some content
</nb-accordion-item-header>
<nb-accordion-item-body>
...some content
</nb-accordion-item-body>
</nb-accordion-item>
</ng-template>
</ng-container>
</nb-accordion>
你能帮帮我吗?
使用 model.ItemsType
而不是 model.itemtype
StackBlitz 演示:https://stackblitz.com/edit/angular-nested-template-reference
对于那些认为 ng-template
不能与 *ngIf
一起使用的人,请参阅 *ngIf
被替换为 [ngIf]
指令(但不建议)。