【angular-基础教程】内置结构型指令NgIf

if else

参考
方式一

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

方式二

<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

方式三

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

带上for循环

<nz-dropdown-menu #csMenu="nzDropdownMenu">
  <ul nz-menu>
    <ng-container *ngFor="let item of countrysideList">
      <ng-container *ngIf="item.child.length == 0; then countryside else countryside_has_sub"></ng-container>
      <ng-template #countryside>
        <li nz-menu-item>{{ item.name }}</li>
      </ng-template>
      <ng-template #countryside_has_sub>
          <li nz-submenu [nzTitle]="item.name">
            <ul>
              <li nz-menu-item *ngFor="let item_sub of item.child">{{ item_sub.name }}</li>
            </ul>
          </li>
      </ng-template>
    </ng-container>
  </ul>
</nz-dropdown-menu>