Angular-防止从下拉列表中选择相同的选项 [英] Angular- Prevent selection of same options from a dropdown
问题描述
我用文本区域制作了这个下拉菜单，用于在角度材质对话框中输入.我在下拉菜单中只有三个选项(到目前为止)-英语"、法语"和加拿大法语".我已经默认禁用了英语".现在，对于其余选项，当我单击添加新语言"按钮并选择一个选项(法语；比如说)并添加文本时，我可以禁用所选选项，这样当用户添加第三种语言时，他们就不能再次选择它.它工作正常.像这样(这是没有点击保存按钮)现在问题从这里开始.当我选择法语"(比如说)并点击保存按钮时.然后再次打开对话框.我再次在添加第三种语言的选项中看到法语"和加拿大法语".我该怎么做才能使它像英语"一样不活跃和灰色?
这是 ts 代码:
导出类 ModalAllComponent 实现 OnInit {对话数据:对话数据模型；语言:任何[]；行:任何[];项目！:任何[];构造函数(public dialogRef:MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:DialogDataModel) {this.dialogData = 数据；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(): 无效 {}添加新语言(){this.rows.push({代码: ''，标题: ''，价值: ''，可以true});}onChangeValue(ev: 任何){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;}返回行；})控制台日志(this.rows)this.languages = this.languages.map(lang => {if (lang.code == ev.value) {lang.canEdit = false;控制台日志(语言)；}回郎;});this.isDisabled()}被禁用(){return this.rows.filter((item) => item.value == '' || item.code == '').length >0?真的: 错误的;}提交(ev:任何){this.dialogRef.close({data: this.rows});}背部(){this.dialogRef.close()}removeBtn(索引:编号){this.rows.splice(index, 1);}} 我在很多地方进行了控制台日志记录，最后设法将问题缩小到可能发生问题的地方.在console.log(lang)中，我看到，当我选择'French'时，标志canEdit变为false.但是在console.log(this.rows), 当我选择法语"时，标志 canEdit 没有变成 false
如何解决问题?
HTML 代码:
<table class="justify-content-between"><tr *ngFor="let entity of rows;让 i = 索引"><td class="col-1";*ngIf=entity.value!=null"><mat-select [(ngModel)]=entity.code";[禁用]=！entity.canEdit"(selectionChange)=onChangeValue($event)"><mat-option *ngFor=让语言的语言"[禁用]=!lang.canEdit"[value]=lang.code">{{lang.title}}</mat-select><!-- <mat-error *ngIf="entity.code.hasError('required')">请选择语言</mat-error>--></td><td class="col-1";*ngIf=entity.value!=null"><textarea style="height: 2rem";类=pl-5"[禁用]=！entity.canEdit"[(ngModel)]=entity.value">{{ entity.value }}<mat-icon class="pl-2";样式=颜色:红色；字体大小:2rem；光标:指针；"(click)=removeBtn(i)">关闭</mat-icon></td></tr><div class="d-flex flex-column align-items-center mt-2"><button class="form-control";(click)="addNewLanguage()";*ngIf="rows.length 添加新语言</button><div class="d-flex pt-2"><button class="form-control";[禁用]=isDisabled()"；(click)="back()">Discard</button><button class="form-control ml-4 pl-4 pr-4";[禁用]=isDisabled()"；(click)="submit($event)">Save</button> 这是模态打开的地方:
localiseFoodName() {const dialogData = <对话数据模型 >{localisedEntities: this.foodModel.localisedName.map((item: any) => {if (item.code == 'en') {item.canEdit = false;} 别的 {item.canEdit = true;}归还物品;}),};让 dialogRef = this.dialog.open(ModalAllComponent, { width: '26.5rem', data: dialogData });dialogRef.afterClosed().subscribe(res => {如果(res&& res.data){控制台日志(res)控制台.log(res.data)让温度:任何this.foodModel.localisedName.map((item:any)=>{temp = res.data.find((element:any)=> element.code === item.code);如果(温度){item.value = 临时值item.canEdit = temp.canEdit = false}//控制台日志(温度)})const food = this.foodModel.localisedName控制台日志(食物)}})}当我 console.log(food) 时，我可以看到 canEdit:false.但是当我再次打开模态时，在 console.log(this.dialogData) 中，canEdit 又是True"；对于所选项目
预先感谢您的帮助！
选择时，获取函数内的选定项并过滤语言数组.
I made this dropdown with a textarea for input in angular material dialog. There I have only three options in the dropdown(so far)-'English','French' and 'Canadian French'. I have already disabled 'English' by default. Now, for the rest of the remaining options, when I click 'Add new Language' button and select an option(french ; say) and add text I am able to disable the selected option so that when the user adds the third language they cannot select it again. It works fine. Like this (This is without hitting the save button) Now the problem starts here. When I select 'French'(say) and hit the save button. And again open the dialog-box. I am again seeing 'French' along with 'Canadian French' in the options for the adding a third language. What do I do to make it inactive and grey-ish like 'English'?
This the ts code:
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);
}
}
I was console-logging at a lot of places and finally manage to draw down to these place where the problem might be happening.
In console.log(lang), I saw that, when I selected 'French',the flag canEdit turned to false.But in console.log(this.rows), when I selected 'French',the flag canEdit did not turned to false
How to solve the issue?
The HTML code:
<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>
This is where the modal is opening:
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)
}
})
}
When I console.log(food) I could see the canEdit:false. But when I open the modal again, in console.log(this.dialogData) the canEdit is again "True" for the selected item
Thanks in advance for the help!
On selection, get the selected item inside a function and filter the languages array.
这篇关于Angular-防止从下拉列表中选择相同的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
