Question

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

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

Answer 1

只需在代码上添加一些mods

<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的名字是什么，我只是将表单作为演示。

让我知道你过得怎么样。

干杯！

Angular 2 Select Label占位符被覆盖

1 个答案: