Решено - Angular 7 - вложенная метка <ng-template> не работает

Question

У меня есть следующий код:

<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>

Может ли кто-нибудь помочь мне с вопросом, почему вложенный элемент div после h2 не работает, пожалуйста?

Заранее спасибо.

Answer 1

Решение было следующим:

<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>