Question

以下是我要做的事情：

＆＃13;

html_nodes

＆＃13;

我需要的是在初始化视图时，我需要设置select的值<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>（在另一个事件中从db加载）。我已尝试放置默认文本manager?.name == property.manager.name以选择默认值但不起作用。

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

我错过了什么吗？

Answer 1

您可以通过设置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);

以下是标记和代码的相关部分。有关演示，请参阅this 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);
}

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

1 个答案: