目前,我有水果组件并更新水果组件。水果组件负责显示不同的水果碎片和更新这些碎片的按钮。 当前选择的水果在对话框数据中传递
水果组件 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 会自动更新,这是我不想要的。我只想将数据从 Fruits html 传递到fruits update,而不是其他方式。我该如何解决这个问题?
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 会自动更新,这是我不想要的。我只想将数据从 Fruits html 传递到fruits update,而不是其他方式。我只想要一种方式绑定。我该如何解决这个问题?
原因是,您将一个对象传递给对话框组件,并且由于 javascript 对象通过引用工作,因此如果您的对象在对话框组件中发生了更改,它也会在您的主组件中发生更改。因此将数据传递到对话框的最佳方法是使变量不可变。
在你的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 }
});
}
fruitsUpdateDialog() {
const tempFruits = JSON.parse(JSON.stringify(this.selectedFruits));
this.dialog.open(FruitsUpdateComponent, {
data: { selectedFruits: tempFruits }
});
}