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

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

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

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

但是，您可能希望将整个对象绑定到select-option。这是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上添加了一个默认占位符。

<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。

Answer 2

您需要将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