Dropdown wird nicht in angular2 angezeigt, während die Seite geladen wird

Question

Ich habe den Code für die Dropdown-Liste kann nicht angezeigt werden, wenn die Seite geladen ist. Die Dropdown-Liste wird angezeigt, sobald Sie auf die Schaltfläche zum Aktualisieren klicken.

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

Die eingereichten i das Drop für Register Person hinzugefügt wird mit Typ als Benutzer oder Administrator oder Betreuer geben, hier i, die Felder Dropdown wird nicht angezeigt, wenn die Registrierungsseite geladen ist, es wird angezeigt, wenn wir die bereits geladene Seite erneut aktualisieren.

i die Ausgabebilder anhängen wie folgt: here the dropdown is not dsiplay after the companyName filed

Und nachdem ich die Seite neu zu laden das Drop-Down ist Anzeige (dh) folgt: the dropdown is comes after readload

Answer 1

Sie müssen die falsche Option Element beheben, wie pro unten :

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

sicher t machen auch Die Rollen werden in der Controller-Typoskript-Datei korrekt initialisiert.

Siehe Angular 2 - Setting selected value on dropdown list