Angular中数据清空时ng-template未触发问题求助

Ah, I see the issue here! The problem lies in how Angular's *ngIf evaluates your data array. When you clear the array, it becomes an empty array [], but in JavaScript (and Angular), empty arrays are considered truthy values. That means *ngIf="data" will still be true even when the array has no items, so the else empty branch never gets triggered.

Here's the quick fix: #

Change your *ngIf condition to check if the array has any elements instead of just checking if the array exists. You can do this by checking data.length (or data?.length if data might be null/undefined initially):

<ul class="list-group" *ngIf="data.length 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>
  <!-- Your empty state content here, e.g.: -->
  <p>No data available. Click "Fill" to add items!</p>
</ng-template>

Double-check your clearData() method: #

Make sure your component's clearData() function is properly setting data to an empty array (this ensures Angular detects the change and updates the view):

clearData(): void {
  this.data = []; 
  // If you were modifying the array in place (like splice), reassigning is still the clearest way to trigger change detection
}

This way, when you clear the data, data.length becomes 0 (a falsy value), so Angular will switch to displaying your empty template as expected.

内容的提问来源于stack exchange，提问作者HVenom