问题描述
我正在构建一个 Angular 应用程序,在该应用程序中,我遇到了以下情况:组件订阅了服务上的 Observable
值并使用 async pipe
呈现数据。它在嵌套的编辑组件中注入值,然后呈现一个 reactive form
。
我的问题是,从表单提交值似乎直接改变了 Observable 源 (BehaviorSubject
)。有什么办法可以避免这种情况?代码如下,但名称已更改。
data.service.ts:
export class DataService {
private dataSource = new BehaviorSubject<MyData[]>(null);
private data$ = this.dataSource.asObservable();
getDataObservable(): Observable<MyData> {
// fetch data from api,subscribe to it
// and call dataSource.next() on subscription result
}
update(data: MyData) {
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// dataSource.value IS ALREADY MUTATED HERE
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
}
list.component.ts:
export class ListComponent implements OnInit {
@input() userId: string;
data$: Observable<MyData[]>;
dataInEditing: MyData;
constructor(private dataService: DataService ) { }
ngOnInit() {
this.data$ = this.dataService.getDataObservable();
}
onDataSelected(data: MyData): void {
this.dataInEditing = data;
}
onDataEdited(data: MyData): void {
this.dataService.update(data);
this.dataInEditing = null;
}
}
list.component.html:
<div *ngIf="data$ | async as data; else loading">
<data-table</data-table> <!--inputs/outputs ommited-->
<data-edit
*ngIf="!!dataInEditing "
[data]="dataInEditing "
(dataChangedEvent)="onDataEdited($event)"></data-edit>
</div>
<ng-template #loading>Loading...</ng-template>
data-edit.component.ts
export class DataEditComponent implements OnChanges {
@input() data: MyData;
@Output() dataChangedEvent = new EventEmitter<MyData>();
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnChanges(changes: SimpleChanges): void {
this.form = this.createForm();
}
updateData(): void { // onSubmit
if (this.form.valid) {
// update data
this.dataChangedEvent.emit(this.data);
}
}
private createForm(): FormGroup {
return this.fb.group({/**/});
}
}
重申:DataService.dataSource.value
甚至在我尝试在 DataService.update()
中手动执行之前已更改项目。这告诉我组件获得与 BehavIoUrSubject
相同的引用。我应该将可观察数据 map
到一个全新的数组中吗?还是我的方法完全错误?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)