javascript Angular 5 设置 HTML 选择元素的选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50302062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Set selected value of HTML Select Element
提问by Subhan Ahmed
Here is what I'm trying to do:
这是我想要做的：
<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>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 Ahmedto select the default value but its not working.
我需要的是当视图初始化时，我需要设置 select where 的值manager?.name == property.manager.name（从另一个事件的 db on 加载）。我试图放置一个默认文本Subhan Ahmed来选择默认值，但它不起作用。
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.
管理器在开始时加载，我从 Firestore 加载它们并managers: Observable<Manager>;在 期间将它们分配给一个变量subscribe()，而property.manager在另一个输入的更改事件之后加载。
Am i missing something?
我错过了什么吗？
采纳答案by ConnorsFan
You can select an item of the dropdown list by setting the value of property.manager. Assuming that selectedNameis the name of the Manageritem that you want to select, you can do this:
您可以通过设置 的值来选择下拉列表中的项目 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);
Here are the relevant parts of the markup and code. See this stackblitzfor a demo.
以下是标记和代码的相关部分。有关演示，请参阅此 stackblitz。
HTML:
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)">
Code:
代码：
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);
}
