在Angular中,可以使用RxJS的观察者模式来观察对象数组的变化,并将特定字段收集到另一个数组中。以下是一个解决方法的代码示例:
首先,创建一个服务(例如DataService
),用于管理对象数组和目标数组的状态:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private objectsArray: any[] = []; // 对象数组
private targetArray: any[] = []; // 目标数组
objectsArraySubject = new BehaviorSubject(this.objectsArray); // 观察对象数组的变化
addObject(object: any) {
this.objectsArray.push(object);
this.objectsArraySubject.next(this.objectsArray);
}
removeObjects() {
this.objectsArray = [];
this.objectsArraySubject.next(this.objectsArray);
}
collectField(field: string) {
this.targetArray = this.objectsArray.map(obj => obj[field]);
return this.targetArray;
}
}
然后,在组件中使用DataService
服务,并订阅objectsArraySubject
来观察对象数组的变化:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
template: `
{{ obj.name }}
{{ field }}
`
})
export class MyComponent implements OnInit {
objectsArray: any[] = []; // 对象数组
targetArray: any[] = []; // 目标数组
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.objectsArraySubject.subscribe(objects => {
this.objectsArray = objects;
});
}
addObject() {
const object = { name: 'Object ' + (this.objectsArray.length + 1) };
this.dataService.addObject(object);
}
removeObjects() {
this.dataService.removeObjects();
}
collectField() {
const field = 'name';
this.targetArray = this.dataService.collectField(field);
}
}
在上述代码中,点击“添加对象”按钮将会向objectsArray
中添加一个新对象,并触发objectsArraySubject
的更新。targetArray
将会被重新计算,并在模板中展示。
点击“移除对象”按钮将会清空objectsArray
,同时也会清空targetArray
。
最后,调用collectField()
方法可以将objectsArray
中指定字段的值收集到targetArray
中,并在模板中展示。