Angular2 PrimeNg Dropdown 在未定义时显示值

Question

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

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

  <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
                    });
                }
            });

根据上述内容，下拉菜单似乎不是默认为 undefined 而是数组中的第一个元素。 但它甚至不承认在后端选择了第一个元素。

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>