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

Question

我有下拉代码，加载页面时无法显示。 单击刷新按钮后，将显示下拉列表。

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

Answer 1

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

<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>        

还要确保角色在控制器打字稿文件中正确初始化。

见Angular 2 - Setting selected value on dropdown list