Question

在Angular7的“选择”列表中设置最初选择的项目

我是有角度框架的初学者。我想设置一个默认的下拉列表选择值。应该在.ts文件中添加什么，以便得到预期的结果？

.html文件：

<select  name="employees"   (change) = "onEdit(emp)" [(ngModel)]="employees" class="form-control">
  <option *ngFor="let emp of employees"  [value]="emp.id">
    {{emp.fullName}}
  </option>
</select>

.ts文件：

ngOnInit() {    
this.service.getEmployeenames().subscribe(actionArray => {
  this.employees = actionArray.map(item => {
    return {
      id: item.payload.doc.id,
      ...item.payload.doc.data()
    } as Employee;
   })
  });     
 }

假设下拉菜单中有3个项目可供选择：

Employee1
Employee2
Employee3

默认设置为Employee1。

谢谢！

Answer 1

您需要将employeeId与[(ngModel)]而不是列表绑定，因为您要将[value]="emp.id"绑定到employeeId

HTML代码：

                                                              \/\/\/\/\/
<select  name="employees" (change)="onEdit(emp)" [(ngModel)]="employeeId" class="form-control">
  <option *ngFor="let emp of employees" [value]="emp.id">
    {{emp.fullName}}
  </option>
</select>

TS代码：

employeeId : any = "0" //  like this in your case it should be an Id of employee

Stackblitz

Answer 2

或者，您可以使用ng [ngValue]。

绑定到[value]时，通常采用字符串或数字的格式。

但是，在某些情况下，您可能希望将整个对象绑定到选择选项。这是ngValue有用的时候。

在此示例中，我们将整个emp对象绑定到选项值。我们选择了employee数组的第一个索引作为默认选定值。

在component.ts上，

employee: any = undefined;
employees = [
  {fullName: 'Employee-0',id:"0"},
  {fullName: 'Employee-1',id:"1"},
  {fullName: 'Employee-2',id:"2"}
];

constructor() {
  this.employee = this.employees[1];
  console.log(this.employee)
}

Component.html，

<select  name="employees" (change) = "onEdit(emp)" [(ngModel)]="employee" class="form-control">
  <option *ngFor="let emp of employees" [ngValue]="emp">
    {{emp.fullName}}
  </option>
</select>

我在这里创建了一个demo。

编辑：为了在代码上添加所需的验证，您将需要在<select>标记上添加所需的属性。我还为选择添加了默认占位符。

<select name="employeeInput" [(ngModel)]="employee" required class="form-control" #employeeInput="ngModel" >
  <option disabled [ngValue]="null">--Selected--</option>
  <option *ngFor="let emp of employees" [ngValue]="emp">
    {{emp.fullName}}
  </option>
</select>

<div *ngIf="employeeInput.control.errors?.required && isSubmitted">
    Name is required.
</div>

<div>
  <button (click)="submit()">SUBMIT</button>
</div>

#employeeInput="ngModel"导出NgModel到一个名为employeeInput的局部变量中。如果未选择该选项，则带有* ngIf的将会显示验证错误消息。

在您的component.ts上，我已将employee设置为null，以便选择默认的占位符。此外，submit()方法将isSubmitted设置为true，以便确认消息仅在提交表单时显示。 if条件将检查是否使用值选择了输入，因此将检查条件this.employeeInput.errors。

@ViewChild('employeeInput') employeeInput: TemplateRef<any>;
employee: any = undefined;
isSubmitted: boolean = false;
employees = [
  {fullName: 'Employee-0',id:"0"},
  {fullName: 'Employee-1',id:"1"},
  {fullName: 'Employee-2',id:"2"}
];

constructor() {
  this.employee = null;
}

submit() { 
  this.isSubmitted = true;
  if (!this.employeeInput.errors) {
    // will only enter this block of code if the select has no errors
    // insert the rest of your firebase code
  }

签出demo。

在Angular7的``选择''列表中设置最初选择的项目

2 个答案: