state.service.ts

Question

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

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来呈现它e。 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侦听器吗？）。而且状态具有明确定义的要交互的界面，因此没有人在应用程序状态的内部结构中摆弄任何东西。

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

1 个答案:

state.service.ts