Angular 5 设置 HTML 选择元素的选定值 [英] Angular 5 Set selected value of HTML Select Element

问题描述

这是我想要做的:

<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 来选择默认值，但它不起作用.

What I need is when the view is initialised, I need to set the value of the select where manager?.name == property.manager.name (which is loaded from db on on another event). I've tried to place a default text Subhan Ahmed to select the default value but its not working.

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

Managers are loaded at the start, I load them from Firestore and assign them to a variable managers: Observable<Manager>; during subscribe(), while property.manageris loaded after another input's change event.

我错过了什么吗?

推荐答案

您可以通过设置property.manager的值来选择下拉列表中的一项.假设 selectedName 是您要选择的 Manager 项目的名称，您可以这样做:

You can select an item of the dropdown list by setting the value of property.manager. Assuming that selectedName is the name of the Manager item that you want to select, you can do this:

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

这篇关于Angular 5 设置 HTML 选择元素的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！