Angular 2 下拉列表默认值

Posted 2023-03-13

【中文标题】Angular 2 下拉列表默认值

【英文标题】：Angular 2 dropdownlist default values

【发布时间】：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 中的链接。

【参考方案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)