Angular 5 设置 HTML Select 元素的选定值

Question

Angular 5 设置 HTML Select 元素的选定值

8

我想要做的事情是：

<select name="manager" id="manager" [(ngModel)]="property.manager" class="form-control" (change)="onChangeManager($event)" required>
  <option disabled value="">Select Manager</option>
  <option *ngFor="let manager of managers" [ngValue]="manager" [selected]="manager?.name === 'Subhan Ahmed'">
    {{manager?.name}}
  </option>
</select>

当视图初始化时，我需要设置选择器的值为manager?.name == property.manager.name（该值从另一个事件中加载）。我尝试将默认文本Subhan Ahmed放置到选择器中作为默认值，但不起作用。

在开始时加载管理器，我从Firestore加载它们并将它们分配给变量managers: Observable<Manager>;，在subscribe()期间使用，而property.manager是在另一个输入更改事件后加载的。

我是否遗漏了什么？

- Subhan

你说“在另一个事件上从数据库加载”。从数据库加载了什么？我猜是经理列表。对吗？ - ConnorsFan

是的，我从Firestore加载管理器并将它们分配给本地变量managers: Observable<Manager>;在subscribe()中。 - Subhan

在输入事件发生后，会加载 property.manager。而管理器则是在启动时加载的。 - Subhan

请注意，property.manager 与下拉列表绑定，使用了 [(ngModel)]。因此，它是由列表中的选定项目设置的。它不能同时绑定到另一个输入元素。 - ConnorsFan

没错，我只想将所选值更改为稍后加载的经理。 - Subhan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ConnorsFan · Accepted Answer

您可以通过设置 property.manager 的值来选择下拉列表中的项目。假设selectedName 是您想要选择的Manager项的名称，您可以执行以下操作：

// Case sensitive
this.property.manager = this.managers.find(m => m.name === this.selectedName);

// Case insensitive
let selectedNameUp = this.selectedName.toUpperCase();
this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);

以下是相关的标记和代码。请参见此 stackblitz以查看演示。 HTML：

<select name="manager" [(ngModel)]="property.manager" class="form-control" required>
  <option disabled [ngValue]="undefined">Select Manager</option>
  <option *ngFor="let manager of managers" [ngValue]="manager">{{manager.name}}</option>
</select>
<input type="text" [(ngModel)]="selectedName" (ngModelChange)="onNameChange($event)">

代码：

selectedName: string;

property = {
  ref_no: '',
  address: '',
  manager: undefined
};

managers = [
  { "company": "Test Company", "name": "John Doe", "id": "3oE37Fo2QxGHw52W7UHI" }, 
  { "company": "Another Company", "name": "John Brown", "id": "LRF8xAi48rRuWu0KZex3" }, 
  { "company": "XYZ", "name": "Subhan Ahmed", "id": "TqOQHbdwJdwgwD8Oej8v" }
];

onNameChange($event) {
  let selectedNameUp = this.selectedName.toUpperCase();
  this.property.manager = this.managers.find(m => m.name.toUpperCase() === selectedNameUp);
}