时间戳

首页 > 解决方案 > Angular 2 Select Label 占位符被覆盖

angular - Angular 2 Select Label 占位符被覆盖

问题描述

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

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

标签： angularangularjs-directiveangular-ui-bootstrap

解决方案

只是代码上的一点点模组

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

让我知道你过得怎么样。

干杯!

推荐阅读