订阅更改的方法而无需遍历每个组件中的对象数组

时间:2018-12-04 03:38:55

标签: javascript angular rxjs observable subject

假设我们有一个对象数组,如下所示:

[
    0: {'id': 0, 'title': 'ABC', value: '113' },
    1: {'id': 1, 'title: 'BCD', value: '242' },
    ...
    99: {'id': 99, 'title: 'ZAQ', value: '971' },
]

对象数组是应用程序不同组件所需的信息。例如,component A仅需要获取id=0的更新数据,而component B仅需要id=2id=6。对象数组将随着时间变化,因此,有一个包含它的主题。

已更改对象的数组将发送到以下所示的各个组件:

   private testSubject = new Subject<any>();

   public notifyTestChanged(changedData: any): void {
       this.testSubject.next(changedData);
   }

   public onTestChanged(): Observable<any> {
       return this.testSubject.asObservable();
   }

另一个组件订阅testSubject来获取数组,而我正在遍历数组以查找对象是否存在于更改后的对象数组中。

onTestChanged.subscribe((changedData) => 
   changedData.find((data) => 
      return componentchanged.id === data.id))
 // componentchanged.id is a parameter in the component, an identity for component.

是否有一种方法可以订阅更改,而无需遍历每个组件中的对象数组来获取组件所需的所需数据?我避免为每个对象创建1个主题,因为对象数组可能包含数百个对象。

2 个答案:

答案 0 :(得分:0)

Observables支持在应用程序的发布者和订阅者之间传递消息。与事件处理,异步编程和处理多个值的其他技术相比,可观察对象具有明显的优势。

这个想法类似于报纸订阅。如果您在任何时候更改了新论文或阵列信息,就将其发布到已订阅的内容上。

这是一个gitHub存储库,其中包含工作示例https://github.com/NativeScript/nativescript-sdk-examples-js/tree/master/app/ns-framework-modules-category/observable-array/basics

或查看我在这里找到的示例https://angular.io/guide/observables

这是我在这里找到的另一个示例https://docs.nativescript.org/ns-framework-modules/observable-array

const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;

// Create ObservableArray with lenght
let myObservableArray = new ObservableArray(10);

// Create ObservableArray from array.
const arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34];
myObservableArray = new ObservableArray(arr);
// Create ObservableArray from arguments.
myObservableArray = new ObservableArray(1, 2, 3, 5, 8, 13, 21, 33, 55, 89);


const firstItem = myObservableArray.getItem(0);
const secondItem = myObservableArray.getItem(1);
const thirdItem = myObservableArray.getItem(2);

myObservableArray.on(ObservableArray.changeEvent, (args) => {
console.log(args.index); // Index of the changed item (in this case 7).
console.log(args.action); // Action (In this case "update")
console.log(args.addedCount); // Number of added items (In this case 1).
console.log(args.removed); // Array of removed items (in this case 33).
});    
myObservableArray.setItem(7, 34); // at seventh (7) index setting value of 34

答案 1 :(得分:0)

我认为您最好的选择是使用ngrx。您可以在https://ngrx.io/guide/store处找到他们的文档。您的对象将在整个应用程序中保留在内存(存储)中。而且,如果商店得到更新,它将自动更新在应用程序中使用商店的任何人。进行检查,听起来对您有很大帮助。有很多代码需要编写,但是效果很好。