angular - 避免改变 Observable 源

Question

我正在构建一个 Angular 应用程序，其中存在以下情况：组件订阅Observable服务值并使用async pipe. 它在嵌套的编辑组件中注入值，然后渲染一个reactive form.

我的问题是，似乎直接从表单提交值会改变 Observable 源（BehaviorSubject）。有什么办法可以避免这种情况？代码如下，但名称已更改。

数据服务.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>

数据-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将可观察数据转移到一个全新的数组还是什么？或者我正在接近这个完全错误的？

标签： angularrxjsangular2-observablesmutability