页面加载时，下拉不会显示在angular2中

我有下拉代码，页面加载时无法显示。下拉显示一次点击刷新按钮。页面加载时，下拉不会显示在angular2中

HTML：

<div class="form-group row"> 
    <select id="select111" name="role" placeholder="Roles" class="form-control selectpicker" style="width:476px;"> 
     <option *ngFor="let role of roles" [value]="role">{{role}}</option> 
    </select>   
</div>

component.ts：

export class RegistrationComponent implements OnInit { 
submitted = false; 
loading= false; 
// registrationForm: FormGroup; 

roles = ['User', 'Admin' ,'Supervisor']; 

    registers={ 
    username:'', 
     email:'', 
     password:'', 
     companyName:'', 
     role:'' 
    } 

    registervalid=false; 

    constructor(private authService: AuthService,public router:Router,public http:Http) { 
    } 

    ngOnInit(): void { 

     this.registers.role=this.roles[0]; 
    } 

    onDefault($event){ 
    $event.preventDefault(); 
    console.log('selected: ' + $event.target.value); 

}  
    CreateAccount(){ 
    this.submitted = true; 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(this.registers); 
    console.log('the registers is a' + body) 
    this.http.post('http://localhost:3000/api/user', body,options).map((res:Response) => res.json()) 
    .subscribe(data =>{ 
    this.registers = data; 
    console.log(' data object' +JSON.stringify(data)); 
    if (data) { 
    console.log('insert sucess msg' +JSON.stringify(this.registers)); 
     alert('login is successfully'); 
     this.router.navigate(['/login ']); 
      } 
}, 
    err => console.error(err), 
    () => console.log('done') 

    ); 
    } 
}  



    `I used the angular2 here no controller all are components, In this file i wrote registration page for my application'.

备案的我增加了对注册个人的下降与类型用户或管理或主管进入，在这里，我的下拉列表中的字段在加载注册页面时不显示，它会显示何时再次刷新已加载的页面。

附上输出图像如下： here the dropdown is not dsiplay after the companyName filed

而且我重新加载页面后，下拉列表是显示（即）如下： the dropdown is comes after readload

来源

2017-08-09 saranilango

可以显示您的控制器端代码吗？你也错过'''在'选项'检查它 –

Sry for <被错过了，但我已经在我的代码中添加了，我添加了组件代码 – saranilango

你的角度工作正常，必须有错误的CSS端，你需要检查你的代码。并检查代码是否存在于DOM中或不存在 –

您需要修改不正确的选项元素按以下：

<div class="form-group row"> 
<select id="select111" name="role" placeholder="Roles" class="form-control selectpicker" style="width:476px;"> 
    <option *ngFor="let role of roles" [value]="role">{{role}}</option> 
</select>

还要确保ŧ他在控制器typescript文件中正确地初始化他的角色。

请参阅Angular 2 - Setting selected value on dropdown list

来源

2017-08-09 12:18:45

所有的代码都很好下拉是第二次我加载或重新加载注册页面 – saranilango

页面加载时，下拉不会显示在angular2中

回答

相关问题