html - 使用 Angular 在下拉列表中选择的设置

问题描述

我在下拉列表中显示了一个列表，但它将默认值显示为空白，而不是下拉列表中的第一项。

我尝试添加let i = 0然后[selected]="i = 0"，但这似乎没有将默认项设置为第一项，但是我从i.

下面是我的代码：

<div class="form-group">
    <label for="userName">User Name</label>
    <select formControlName="userName" class="form-control" (change)="userChange($event)">
      <option *ngFor="let row of usersModel;let i = index" value="{{ row.id }}" [selected]="i == 0">{{ row.userName }} {{ i }}</option>
    </select>
</div>

这是我的打字稿文件：

    import { Component, OnInit } from '@angular/core';
import { UserAdminService } from '../../services/user-admin.service';
import { FormBuilder, Form, FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'lib-add-user-to-role',
  templateUrl: './add-user-to-role.component.html',
  styleUrls: ['./add-user-to-role.component.css']
})
export class AddUserToRoleComponent implements OnInit {
  addUserToRoleForm: FormGroup;
  rolesModel: any[];
  usersModel: any[];
  selectedRole: string;
  selectedUser: string;

  constructor(private userAdminService: UserAdminService, private formBuilder: FormBuilder, private router: Router) {
    var roleControl = new FormControl('');
    var userControl = new FormControl('');

    this.addUserToRoleForm = formBuilder.group({ roleName: roleControl, userName: userControl });
  }

  ngOnInit() {
this.userAdminService.getRoles().subscribe(roles => {
  this.rolesModel = roles;
  this.selectedRole = this.rolesModel[0].name;
  this.userAdminService.getUsersNotInRole(this.selectedRole).subscribe(users => {
    this.usersModel = users;
    this.selectedUser = this.usersModel[0].id;
    console.log(this.usersModel[0].userName);
    this.addUserToRoleForm.controls['roleName'].setValue(this.rolesModel[0].name);
    this.addUserToRoleForm.controls['userName'].setValue(this.usersModel[0].userName);
  });
});
  }

  userChange(event: any) {
    this.selectedUser = event.target.value;
    console.log('Selected ' + this.selectedUser);
  }

  AddUserToRole() {
    this.userAdminService.addUserToRole(this.selectedUser, this.selectedRole)
      .subscribe(result => {
        if (result.success) {
          this.router.navigate(['/roleusermaint']);
        }
        else {
          console.log('Error Received on adding user to role');
        }
      });
  }
}

如您所见，我{{ i }}在文本中添加了以确保它显示的值i并且确实如此：

我错过了什么？

谢谢你的帮助！

标签： htmlangularhtml-select

@Axle，如果您使用的是反应式表单，则无需使用[selected]nor (change)，只需在创建表单时为 userName 赋予价值

使用构造函数

const firstId=usersModel[0].id
this.form=new FormGroup({
   userName:new FormControl(firstId)
})

使用表单构建器

const firstId=usersModel[0].id
this.form=this.fb.group({
 userName:firstId
})

使用 setValue，创建表单后

   const firstId=usersModel[0].id
   this.form.get('userName').setValue(firstId)

html - 使用 Angular 在下拉列表中选择的设置

问题描述

解决方案

推荐阅读