Angular 2 Select Label 占位符被覆盖答案

【问题标题】：Angular 2 Select Label placeholder is being overwrittenAngular 2 Select Label 占位符被覆盖
【发布时间】：2019-01-04 02:55:35
【问题描述】：

我是 stackoverflow 的新手，有一个小问题。

我一直在尝试使用引导程序在 Angular 2 中为下拉选择设置占位符。

这是我的 HTML

<div class="organization-field col-sm-8" >
    <div style="display: inline-block; width:100%;">
        <select class="custom-select mr-sm-2"  [formControl]="organizationName" type="string" name="organizationName" (change)="logIn()"  >
            <option [selected]="true" disabled>Select Organization ...</option>
            <option *ngFor="let name of organizationNames" [value]="name.$organizationId"  required>
                {{name.$organizationName}}
            </option>
        </select> 
    </div>

占位符有效，但是我的 ngFor 实际上是通过调用我的后端 Firebase 生成的。

这是 TS 文件

this.organizationService.getOrgs().subscribe(data => {
    data.forEach(org => {
        var newOrg = this.organizationService.convertOrg(org); 
        this.organizationNames.push(newOrg)
    });
})

一旦我从数据库中实际检索到数据，就会出现问题，占位符消失，使占位符看起来非常难看。任何帮助都会非常有帮助

【问题讨论】：

您可以尝试在第一个选项中添加value="" 吗？
像<option *ngFor="let x of this.organizationService.getOrgs().startWith({$organizationName: 'Select Organization ...' }) | async; let i = index" [disabled]="i === 0"> 这样的东西只是一个想法......

标签： angular angularjs-directive angular-ui-bootstrap

【解决方案1】：

代码上的一点点模组

<div class="organization-field col-sm-8">
<div style="display: inline-block; width:100%;">
    <select class="custom-select mr-sm-2" formControl="organizationName" type="string" name="organizationName" (change)="logIn()">
        <option  value="" disabled>Select Organization ...</option>
        <option *ngFor="let name of organizationNames" [value]="name.$organizationId" required>{{name.$organizationName}}</option>
    </select>
</div>

诀窍是在您使用数据更新控制器之后。所选内容在响应式表单和选择中无用或不推荐。

this.organizationService.getOrgs().subscribe(data => {
data.forEach(org => {
    var newOrg = this.organizationService.convertOrg(org);
    this.organizationNames.push(newOrg)
});
this.form.controls.organizationName.setValue("",{ emitEvent: false} );

})

我不知道FormGroup叫什么名字，我只是把form作为演示。

告诉我你过得怎么样。

干杯！

【讨论】：