angular - Angular 8:未在嵌套结构中显示 ng-tmplate 的内容
问题描述
我有一个模型,它的结构中有一个列表和一个枚举属性,如下所示:
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 不能与 ng-template 一起*ngIf
使用的已接受答案?其中语法糖格式被指令替换(但不建议)。*ngIf
[ngIf]
推荐阅读
- svg - Viewbox改变元素的宽度
- javascript - 检测用户是否使用 javascript 或 jquery 输入电子邮件或号码
- c# - 更新 Firebase 实时数据库中的多个节点
- gatling - 在 Gatling 负载测试中无法获取服务器设置的 cookie 值
- c# - .Net Framework 项目上的 Visual Studio 代码分析
- go-github - 如何使用 go-github 打印发布提交的哈希?
- python - 如何制作一个 Python 并发 Future 来指示 Futures 列表何时完成?
- python - 比较两个数据帧以生成具有所有当前值的最终结果
- c# - 应该具有 DropDownList 控件的单元格在运行时没有控件
- iis-7 - 如何识别 SCHANNEL 错误的应用程序来源?