角 | 如何订阅对象数组中的更改

Question

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

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

问题：如何订阅数组中的任何更改（还包括嵌套对象中的更改）？

预期结果：每次更改data时都会触发的函数

Answer 1

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

状态.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以呈现它，例如使用

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

并例如打印出值

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

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

一般来说，我发现 Angular 应用程序更容易理解，如果您的组件和您的应用程序状态正确分离（还记得模型-视图-控制器吗？），以便您的组件本身不包含任何状态，并且仅通过以下方式将模板绑定到状态observables 这样你就不需要关心刷新和更新（还记得 Java Swing 监听器吗？）。 并且状态有一个明确定义的接口来交互，这样就没有人在你的应用程序状态的内部结构中摆弄。