Angular 5 和 Primeng 下拉列表动态添加和删除选项

Question

我在研究 angular 5 和 primeng。我的项目页面有 2 个 p-dropdown，要求是，如果 car dropdown 中的标签是 'Others'，则在第二个下拉列表中添加一个名为 'No Paint' 的选项，如果 car 下拉标签不是 'Ohters' 从第二个下拉列表中删除 'No Paint' 选项。我坚持动态地添加和删除下拉选项。谁能指导一下，下面是我的代码。谢谢

    Car: <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [filter]="true"></p-dropdown>

    <p-dropdown [options]="paints" [(ngModel)]="selectedPaint" [filter]="true"></p-dropdown>

    constructor() {
            this.cars= [
                {name: 'AA', code: 'aa'},
                {name: 'BB', code: 'bb'},
                {name: 'CC', code: 'cc'},
                {name: 'DD', code: 'dd'},
                {name: 'Others', code: 'others'}
            ];

this.paints= [
                {name: 'XX', code: 'xx'},
                {name: 'YY', code: yyb'},
                {name: 'ZZ', code: 'zz'}
            ];

型号：DropDownOptions.ts

export class DropDownOptions {
label: string;
value: string
}

我确实尝试了 this.cars.push(new DropDownOptions('Others', 'others'))，但这是在我更改下拉列表值时多次添加 'Others' 选项。

Answer 1

这应该很简单。添加第一个 p-dropdown（汽车）事件 (onChange)

<p-dropdown [options]="cars" 
(onChange)="checkIfOther($event)" 
[(ngModel)]="selectedCar" 
[filter]="true"></p-dropdown>

.ts:

checkIfOther(event){
if(event.value.code === 'others'){
this.paints.find(paint => paint.code == 'No Paint') === undefined ? this.paints.push({name:'No paint', code: 'No Paint'}) : null;
}
else{
let idx = this.paints.findIndex(paint => paint.code == 'No Paint';
idx != undefined ? this.paints.slice(idx,1) : null;
}

Answer 2

我是用 ES6 做的，如下所示：

if(event.value.code === 'others'){
this.paints.find(paint => paint.code == 'No Paint') === undefined ? this.paints.push({name:'No paint', code: 'No Paint'}) : null;
}
else{
this.paints = this.paints.filter(e => e !== 'Others') //remove 'Others'
}

Angular 5 和 Primeng 下拉列表动态添加和删除选项

Angular 5 and Primeng dropdown add and remove option dynamically

typescript

primeng

angular

primeng-dropdowns

angular5