Angular 7 - 嵌套<ng-template>标签不起作用

Question

I have this code as follow:

<h2>{{ commentTitle }}</h2>

<div *ngIf="errorHappened; then displayError else displayComments">
  <div *ngIf="comments == undefined || comments.length == 0; then noComments else commentsList"></div>
</div>

<ng-template #displayError>
  <div class="alert alert-danger">An error has occurred. Please try again.</div>
</ng-template>

<ng-template #displayComments>
  <ng-template #commentsList>
    <ul>
      <li *ngFor="let comment of comments">
        <div>{{ comment.user }}</div>
        <div>{{ comment.date }}</div>
        <div>{{ comment.content }}</div>
      </li>
    </ul>
  </ng-template>

  <ng-template #noComments>
    <div>No comments yet</div>
  </ng-template>
</ng-template>

<a class="btn btn-primary" (click)="openDialog()" mat-raised-button type="button">Add new comment</a>

Could anyone help me about why the nested div's after h2 label doesn't work please?

Thank you in advance.

Answer 1

The solution was as follows:

<h2>{{ commentTitle }}</h2>

<div *ngIf="errorHappened; then displayError else displayComments"></div>

<ng-template #displayError>
  <div class="alert alert-danger">An error has occurred. Please try again.</div>
</ng-template>

<ng-template #displayComments>
  <div *ngIf="comments == undefined || comments.length == 0; then noComments else commentsList"></div>
  <ng-template #commentsList>
    <ul>
      <li *ngFor="let comment of comments">
        <div>{{ comment.user }}</div>
        <div>{{ comment.date }}</div>
        <div>{{ comment.content }}</div>
      </li>
    </ul>
  </ng-template>

  <ng-template #noComments>
    <div>No comments yet</div>
  </ng-template>

  <a class="btn btn-primary" (click)="openDialog()" mat-raised-button type="button">Add new comment</a>
</ng-template>