Question

我正在构建一个 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 到一个全新的数组中吗？还是我的方法完全错误？

避免改变 Observable 源

0 个答案: