Angular 2 下拉列表默认值答案

【问题标题】：Angular 2 dropdownlist default valuesAngular 2 下拉列表默认值
【发布时间】：2017-06-07 12:48:00
【问题描述】：

我有一个从数据库中获取值的下拉列表，我想要一个默认值，例如“选择一个项目”。我该怎么做？

HTML 代码

<div class="ui-grid-row">
    <div class="ui-grid-col-2">
        Period :
    </div>
    <div class="ui-grid-col-4">
        <p-dropdown [options]="periodids" formControlName="periodid" [(ngModel)]="periodid" [autoWidth]="false" [style]="{'text-align': 'left'}"></p-dropdown>
    </div>
</div>

从数据库中填充下拉列表

populatePeriod() {
    this.periodids = [];
    this.periodservice.getPeriods().then(returneddata => {
        for (let i = 0; i < returneddata.length; i++) {
            this.periodids.push({ label: returneddata[i].PeriodName, value: returneddata[i].Id });
        }
    });
    //console.log(this.periodids)
}

【问题讨论】：

你可以在这里添加组件代码吗？
@sudheerKB 看起来是 PrimeNG 的。请参阅下面my answer 中的链接。

标签： javascript angular angular2-forms primeng

【解决方案1】：

PrimeNG documentation 中的示例建议您应该将其添加到您的选项数组中：

populatePeriod() {
    this.periodids = [{ label: "Select an item...", value: null }]; // <-- here

    this.periodservice.getPeriods().then(returneddata => {
        for (let i = 0; i < returneddata.length; i++) {
            this.periodids.push({ label: returneddata[i].PeriodName, value: returneddata[i].Id });
        }
    });

    console.log(this.periodids)
}

【讨论】：