我使用文本区域制作了这个下拉菜单，用于在角度材料对话框中输入。下拉列表中只有三个选项（到目前为止）-“英语”、“法语”和“加拿大法语”。我已经默认禁用了“英语”。现在，对于其余的选项，当我单击“添加新语言”按钮并选择一个选项（法语；比如说）并添加文本时，我可以禁用选定的选项，这样当用户添加第三种语言时，他们就不能再次选择它。它工作正常。像这样（这是没有点击保存按钮）
现在问题从这里开始。当我选择“法语”（比如说）并点击保存按钮时。并再次打开对话框。在添加第三种语言的选项中，我再次看到“法语”和“加拿大法语”。
这是 ts 代码：
export class ModalAllComponent implements OnInit {
dialogData: DialogDataModel;
languages: any[];
rows: any[];
item!:any[];
constructor(
public dialogRef:MatDialogRef<ModalAllComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogDataModel) {
this.dialogData = data;
this.rows = this.dialogData.localisedEntities.filter(lang => lang.value,)
this.languages = this.dialogData.localisedEntities.map(item => ({ code: item.code, title: item.title, canEdit: item.canEdit }))
console.log(this.dialogData)
}
ngOnInit(): void {
}
addNewLanguage() {
this.rows.push({
code: '',
title: '',
value: '',
canEdit: true
});
}
onChangeValue(ev: any){
this.rows = this.rows.map(row => {
if (row.code == ev.value) {
const lang = this.languages.find(lang => lang.code == ev.value);
row.title =lang.title;
}
return row;
})
console.log(this.rows)
this.languages = this.languages.map(lang => {
if (lang.code == ev.value) {
lang.canEdit = false;
console.log(lang);
}
return lang;
});
this.isDisabled()
}
isDisabled(){
return this.rows.filter((item) => item.value == '' || item.code == '')
.length > 0
? true
: false;
}
submit(ev:any){
this.dialogRef.close({data: this.rows});
}
back(){
this.dialogRef.close()
}
removeBtn(index:number){
this.rows.splice(index, 1);
}
}
我在很多地方进行控制台日志记录，最后设法绘制到可能发生问题的这些地方。在console.log(lang)中，我看到，当我选择“French”时，标志 canEdit 变为 false。但是在 中console.log(this.rows)，当我选择“French”时，标志 canEdit 没有变为 false
如何解决问题？
HTML 代码：
<div>
<table class="justify-content-between">
<tr *ngFor="let entity of rows; let i = index">
<td class="col-1" *ngIf="entity.value!=null">
<mat-select [(ngModel)]="entity.code" [disabled]="!entity.canEdit" (selectionChange)="onChangeValue($event)">
<mat-option *ngFor="let lang of languages" [disabled]="!lang.canEdit" [value]="lang.code">{{ lang.title }}</mat-option>
</mat-select>
<!-- <mat-error *ngIf="entity.code.hasError('required')">Please choose an language</mat-error> -->
</td>
<td class="col-1" *ngIf="entity.value!=null">
<textarea style="height: 2rem" class="pl-5" [disabled]="!entity.canEdit" [(ngModel)]="entity.value">{{ entity.value }}</textarea>
<mat-icon class="pl-2" style="color: red;font-size: 2rem;cursor: pointer;" (click)="removeBtn(i)">close</mat-icon>
</td>
</tr>
</table>
<div class="d-flex flex-column align-items-center mt-2">
<button class="form-control" (click)="addNewLanguage()" *ngIf="rows.length < dialogData.localisedEntities.length" [disabled]="isDisabled()">Add new language</button>
<div class="d-flex pt-2">
<button class="form-control" [disabled]="isDisabled()" (click)="back()">Discard</button>
<button class="form-control ml-4 pl-4 pr-4" [disabled]="isDisabled()" (click)="submit($event)">Save</button>
</div>
</div>
</div>
这是模态打开的地方：
localiseFoodName() {
const dialogData = < DialogDataModel > {
localisedEntities: this.foodModel.localisedName.map((item: any) => {
if (item.code == 'en') {
item.canEdit = false;
} else {
item.canEdit = true;
}
return item;
}),
};
let dialogRef = this.dialog.open(ModalAllComponent, { width: '26.5rem', data: dialogData });
dialogRef.afterClosed().subscribe(res => {
if (res && res.data) {
console.log(res)
console.log(res.data)
let temp:any
this.foodModel.localisedName.map((item:any)=>{
temp = res.data.find((element:any)=> element.code === item.code);
if(temp){
item.value = temp.value
item.canEdit = temp.canEdit = false
}
//console.log(temp)
})
const food = this.foodModel.localisedName
console.log(food)
}
})
}
当我console.log(food)能看到canEdit:false. 但是当我再次打开模式时，所选项目再次console.log(this.dialogData)为canEdit“True”
在此先感谢您的帮助！