【问题标题】:Angular 8: Not Showing the content of ng-tmplate in nested structureAngular 8:未在嵌套结构中显示 ng-template 的内容
【发布时间】:2019-07-20 07:12:34
【问题描述】:

我有一个模型,它的结构中有一个列表和一个枚举属性,如下所示:

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>

你能帮帮我吗?

【问题讨论】:

  • ng-template 不渲染任何东西。您正在寻找ng-container,(使用 ng-template 提供了一个参考变量并在两个选项之间进行选择,请参见例如blog.angular-university.io/…

标签: angular ng-template nebular ng-container


【解决方案1】:

使用model.ItemsType 而不是model.itemtype 是一个基本错误

StackBlitz 演示:https://stackblitz.com/edit/angular-nested-template-reference

对于那些认为ng-template 不能与*ngIf 一起使用的人,请参阅why *ngIf doesnt'work with ng-template? 接受的答案,其中语法糖格式*ngIf[ngIf] 指令替换(但不建议使用)。

【讨论】:

    猜你喜欢
    • 2020-04-16
    • 1970-01-01
    • 2022-01-26
    • 2021-07-25
    • 2019-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多