将数据从组件传递到对话框，但不进行模型绑定

Question

目前，我有水果组件和更新水果组件。水果组件负责显示不同的水果芯片和一个按钮来更新这些芯片。当前选择的水果在对话框data

中传递。Fruits组件Html

<div>
<mat-chip-list *ngFor="let fruit of selectedFruits">
<mat-chip>{{ fruit  }}</mat-chip>
</mat-chip-list>
</div>
<button (click)="fruitsUpdateDialog()">
Update Fruits
</button>
fruitsUpdateDialog() {
this.dialog.open(FruitsUpdateComponent, {
data: { selectedFruits: this.selectedFruits }
});
}

FruitsUpdateComponent -这得到正确的水果，这是我想要的，但当我从垫子芯片中删除一个水果，水果组件的Html自动得到更新，我不想要的。我只想从水果html传递数据到水果更新，而不是其他方式。我该如何解决这个问题?

export class FruitsUpdateComponent implements OnInit {
visible = true;
selectable = true;
removable = true;
separatorKeysCodes: number[] = [ENTER, COMMA];
fruitFormControl = new FormControl();
fruits: any;
allFruits: any;
@ViewChild('fruitInput', { static: false }) fruitInput: ElementRef<
HTMLInputElement
>;
@ViewChild('auto', { static: false }) matAutocomplete: MatAutocomplete;
constructor(
@Inject(MAT_DIALOG_DATA) public data) {
this.allFruits = //All Fruits JSON;
};
}
ngOnInit() {
this.fruits= this.data.selectedFruits;
}
remove(fruit: string, index): void {
this.fruits.splice(index, 1);
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.value);
this.fruitInput.nativeElement.value = '';
this.fruitFormControl.setValue(null);
}

HTML

<mat-dialog-content>
<mat-form-field>
<mat-chip-list #chipList>   
<mat-chip
*ngFor="let fruit of fruits ; let fruitIndex= index"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit , fruitIndex)"
>
{{ fruit }}          
</mat-chip>     
<input
placeholder="What"
#fruitInput
[formControl]="fruitFormControl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
/>     
</mat-chip-list>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="selected($event)"
>
<mat-option *ngFor="let fruit of allFruits" [value]="fruit">
{{ fruit }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</mat-dialog-content>

所以水果被正确地传递到对话框，这是我想要的，但是当我从垫子芯片中删除水果时，水果组件Html自动得到更新，这是我不想要的。我只想从水果html传递数据到水果更新，而不是其他方式。我只想要单向绑定。我该如何解决这个问题?

Answer 1

原因是，你正在传递一个对象给dialog组件，而javascript对象是通过引用工作的，所以如果你的对象在dialog组件中改变了，它也会在你的主组件中改变。因此，将数据传递给对话框的最好方法是使变量不可变。

在你的fruits.component.ts

fruitsUpdateDialog() {
this.dialog.open(FruitsUpdateComponent, {
// map function will return copy of original fruits.but it 
// will not point to same reference 
const tempFruits = this.selectedFruits.map(fruit => fruit);
data: { selectedFruits: tempFruits }
});
}