当数据为空时，ng-template 不会触发答案

【问题标题】：ng-template wont trigger when data gets empty当数据为空时，ng-template 不会触发
【发布时间】：2018-03-20 10:16:41
【问题描述】：

我正在使用一个列表ul 来显示来自数组的数据，该数组最初是空的，我使用了另一个模板“空”模板，这里是代码：

<ul class="list-group" *ngIf="data else empty">
  <li *ngFor="let num of data">
    <span>{{num}}</span>
  </li>
</ul>

<button class="btn btn-sm btn-primary" (click)="fillData()">Fill</button>
<button class="btn btn-sm btn-primary" (click)="clearData()">clear</button>

<ng-template #empty>
  <span>.... list empty....</span>
</ng-template>

以上代码的脚本如下

export class QlistComponent implements OnInit {

  data: any[];

  fillData() {
    this.data = [1, 2, 3];
  }

  clearData() {
    this.data = [];
  }

}

问题： 出于某种奇怪的原因，#empty 模板仅在开始时数据为空时触发一次，但一旦数据被填充fillData() 然后被清除再次clearData() #empty 模板不会被触发

【问题讨论】：

标签： angular angular5 ng-template

【解决方案1】：

在*ngIf 表达式中检查data.length 不是数据：

<ul class="list-group" *ngIf="data.length else empty">
      <li *ngFor="let num of data">
        <span>{{num}}</span>
      </li>
    </ul>

在您的情况下，*ngIf 检查数组是否存在。清除数据后，引用仍然存在 CODE EXAMPLE

【讨论】：

【解决方案2】：

你好试试下面的代码：

在 .html 文件中

<ul class="list-group" *ngIf="data.length>0 else empty">
  <li *ngFor="let num of data">
    <span>{{num}}</span>
  </li>
</ul>

<button class="btn btn-sm btn-primary" (click)="fillData()">Fill</button>
<button class="btn btn-sm btn-primary" (click)="clearData()">clear</button>

<ng-template #empty>
  <span>.... list empty....</span>
</ng-template>

.ts 文件

data: any[]=[];

  fillData() {
    this.data = [1, 2, 3];
  }

  clearData() {
    this.data = [];
  }

【讨论】：