时间戳

首页 > 解决方案 > 角 | 如何订阅对象数组的更改

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

问题描述

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

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

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

预期结果：每次触发的函数都data发生了变化

标签： angularrxjsobservable

解决方案

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

状态服务.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用于更新状态，组件将自动刷新。

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

推荐阅读