Angular服务数据更新后组件变量值未在DOM自动同步如何解决？

问题原因 #

1. 你在组件类中直接声明totalLicense时赋值，这个赋值操作仅会在组件实例化时执行一次，后续服务内licenseDetails数组更新不会自动同步到这个变量上
2. 模板里变量名拼写错误：你写的是{{totaLicense}}，少了一个字母l，正确应为{{totalLicense}}
3. 当前只有点击按钮时才会更新的原因是：点击事件触发了Angular变更检测，同时你在updateSummary方法中手动读取了最新的数组长度赋值给变量，才触发了视图更新

解决方案（按推荐度排序） #

方案1：使用Getter自动计算（改动最小） #

直接在组件内定义Getter属性代替固定变量，每次变更检测运行时都会自动获取服务的最新值，无需手动维护更新逻辑：

// 组件类中删除原来的totalLicense声明，替换为以下代码
get totalLicense() {
  return this._service.licenseDetails.length;
}

同时修正模板中的拼写错误即可。

方案2：模板直接访问服务属性（无需额外定义组件变量） #

将注入的服务改为public修饰，直接在模板中读取服务的属性：

// 构造函数中将_service的修饰符改为public
constructor(public _service : LicenseRequestService) {}

模板直接写：

<div>
    Total number of licenses is : {{_service.licenseDetails.length}}
</div>

无需在组件中定义totalLicense变量。

方案3：响应式流方案（Angular最佳实践，适合复杂业务场景） #

先改造LicenseRequestService，将licenseDetails改为响应式流：

// LicenseRequestService 中代码调整
import { BehaviorSubject } from 'rxjs';

// 原来的licenseDetails数组替换为BehaviorSubject
private licenseDetailsSubject = new BehaviorSubject<any[]>([]);
// 对外暴露只读的Observable
public licenseDetails$ = this.licenseDetailsSubject.asObservable();

// 原来更新licenseDetails的地方，改为调用next方法
// 例如原来的this.licenseDetails.push(newItem) 替换为：
const current = this.licenseDetailsSubject.value;
current.push(newItem);
this.licenseDetailsSubject.next([...current]);

组件中直接配合async管道使用，无需手动订阅和管理生命周期：

<div>
    Total number of licenses is : {{(_service.licenseDetails$ | async)?.length || 0}}
</div>

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