Angular2 PrimeNg 下拉列表未定义时显示值

Question

参考使用 libaray：https://www.primefaces.org/primeng/#/dropdown

问题是 select 显示第一个选项，但根据后端，该字段未定义。

  <p-dropdown [options]="avaliableTemplates" [style]="{'width':'100%'}" required placeholder="Select Title" filter [(ngModel)]="selectedTemplate" name="selectedTemplate"></p-dropdown>

这是检查变化的代码：

 @ViewChild('createCampaignForm') form;    
 this.form.control.valueChanges.debounceTime(1000).subscribe(values => this.doValidation(values));

这是我分配 avaliableTamplates 的方式

 this.campaignService.getTemplates(this.authService).subscribe(x => {
                this.avaliableTemplates = [];
                for (var i = 0; i < x.length; i++) {
                    this.avaliableTemplates.push({
                        label: x[i].title,
                        value: x[i].id
                    });
                }
            });

根据以上内容，下拉列表似乎不默认为未定义，而是数组中的第一个元素。但它甚至没有认识到第一个元素是 select 在后端编辑的。

Answer 1

我翻出了 Prime 的文档，也在这里尝试了一些东西。我注意到你应该添加一个默认选项，或者它总是选择第一个默认选项：

this.campaignService.getTemplates(this.authService).subscribe(x => {
    this.avaliableTemplates = x.map((e) => { 
        return { label: e.title, value: e.id}; 
    });

    // Add the default option at position 0
    this.avaliableTemplates.splice(0, 0, {label: 'Select something', value: null});
});

Answer 2

<p-dropdown placeholder=" "></p-dropdown>

Angular2 PrimeNg 下拉列表未定义时显示值

Angular2 PrimeNg Dropdown Shows value when undefined

javascript

primeng

angular