Angular |如何订阅对象数组的变化

Question

在我的 angular 应用程序中，我有以下对象数组：

public data = [
{a: 0, b: [{q: 1, z: 2}]}
{a: 1, b: [{q: 4, z: 9}]}
]

问题：如何订阅数组中的任何变化（也包括嵌套对象的变化）？

预期结果：每次data改变时触发的函数

Answer 1

首先你需要一个服务来包装你的状态（在这里你也可以使用更复杂的框架，比如 Redux，但让我们在开始时保持简单），这通常是解耦你的应用程序的好主意

state.service.ts

import {BehaviorSubject, Observable} from "rxjs/index";
import {Injectable} from "@angular/core";


@Injectable({
    providedIn: 'root',
})
export class StateService {

    private readonly subject: BehaviorSubject<any> = new BehaviorSubject({});

    public readonly observable: Observable<any> = this.subject.asObservable();

    public set(newValue: any): void {
        this.subject.next(newValue);
    }
}

然后你的组件可以注册到 observable 来渲染它。 G。通过使用

public readonly value: Observable<any> = this.stateService.observable
    .pipe(map(_ => JSON.stringify(_)));

和e。 G。打印出值

<p *ngIf="value | async">{{(value | async)}}</p>

如果您现在使用 set 更新状态，组件将自动刷新。

总的来说，我发现 Angular 如果您的组件和应用程序状态正确分离（还记得 Model-View-Controller 吗？），那么您的组件本身不包含任何状态并且仅通过可观察对象将模板绑定到状态，因此您无需关心刷新和更新（还记得 Java Swing 监听器吗？）。并且状态有一个明确定义的交互界面，因此没有人会在您的应用程序状态的内部结构中摆弄。

Angular |如何订阅对象数组的变化

Angular | How to subscribe to changes in array of objects

observable

rxjs

angular

state.service.ts