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

加载页面时，下拉列表不会以角度2显示

1 个答案: