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