javascript - Angular 2下拉列表默认值

Question

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

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

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