这是我正在尝试做的事情:
<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>
我需要的是在初始化 View 时,我需要设置 select where manager?.name == property.manager.name
的值(这是在另一个事件上从数据库加载的)。我试图放置默认文本 Subhan Ahmed
选择默认值但它不起作用。
管理器在开始时加载,我从 Firestore 加载它们并将它们分配给变量 managers: Observable<Manager>;
在subscribe()
期间, 而 property.manager
在另一个输入的更改事件之后加载。
我错过了什么吗?
最佳答案
您可以通过设置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);
}
关于javascript - Angular 5 设置 HTML 选择元素的选定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50302062/