Question

我正在使用列表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 模板不会被触发

Answer 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

Answer 2

您好请尝试以下代码：

at .html file

<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 = [];
  }

当数据变空时，ng-template不会触发

2 个答案: