頁面加載時，下拉不會顯示在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中

回答

相關問題