Angular：ngFor内ngIf绑定视图不更新问题求助

问题回顾 #

你现在的代码逻辑是想让部分列表项始终显示，另一部分由check变量控制显示，但修改下拉框后视图没更新。你的代码如下：

app.component.ts

private check = true;
private some = [
  {name: 'ABC', condition: true},
  {name: 'def', condition: this.check},
  {name: 'GHI', condition: true}
];

app.component.html

<div *ngFor="let item of some">
  <div *ngIf="item.condition"> {{item.name}} </div>
</div>
<select [(ngModel)]="check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

问题根源 #

问题出在你初始化数组some的时候：{name: 'def', condition: this.check}这一行是把check的**初始值（true）**直接赋值给了condition属性，而不是建立一个动态的绑定关系。也就是说，这个condition只是一个固定的布尔值，后续check变量变化时，数组里的condition不会自动跟着更新，所以视图也就不会变化。

另外还有个小细节：Angular模板访问private属性在严格模式下可能会报错，建议把check和some改成public（去掉private修饰符）。

解决方案 #

这里给你两种实用的解决方法，你可以根据需求选择：

方案一：模板中直接判断（推荐，更简洁）

不需要在数组里存储condition，而是给每个列表项标记是否需要始终显示，然后在模板里直接结合check变量判断：

修改后的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  check = true;
  some = [
    {name: 'ABC', alwaysShow: true},
    {name: 'def', alwaysShow: false},
    {name: 'GHI', alwaysShow: true}
  ];
}

修改后的app.component.html

<div *ngFor="let item of some">
  <div *ngIf="item.alwaysShow || check"> {{item.name}} </div>
</div>
<select [(ngModel)]="check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

这样Angular每次触发变更检测时，都会重新计算item.alwaysShow || check的结果，check变化时视图会立刻更新。

方案二：使用getter动态生成列表（适合复杂条件场景）

如果你的条件逻辑比较复杂，需要把判断逻辑放在组件里，可以用getter动态生成带有最新条件的列表：

修改后的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  check = true;
  // 存储基础列表和条件函数
  private baseList = [
    {name: 'ABC', condition: () => true},
    {name: 'def', condition: () => this.check},
    {name: 'GHI', condition: () => true}
  ];

  // 动态生成带最新条件的列表
  get some() {
    return this.baseList.map(item => ({
      ...item,
      currentCondition: item.condition()
    }));
  }
}

修改后的app.component.html

<div *ngFor="let item of some">
  <div *ngIf="item.currentCondition"> {{item.name}} </div>
</div>
<select [(ngModel)]="check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

当check变化时，Angular的变更检测会触发some getter的调用，重新计算每个项的currentCondition值，从而更新视图。

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