在下拉列表中选择带有角度的设置

Question

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

我尝试先添加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>

这是我的TypeScript文件：

    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;
      });
    });

    this.addUserToRoleForm.controls['roleName'].setValue(this.selectedRole);
    this.addUserToRoleForm.controls['userName'].setValue(this.selectedUser);
  }

  roleChange(event: any) {
    this.selectedRole = event.target.value;
    this.userAdminService.getUsersNotInRole(this.selectedRole).subscribe(users => this.usersModel = users);
  }

  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的值，并且确实如此：

我想念什么？

感谢您的帮助！

Answer 1

@@ Axle，如果您使用的是反应式表单，则不必使用[selected]或(change)，只是在创建表单时将值提供给userName

使用构造函数

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

使用formBuilder

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

使用setValue，创建表单后

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