在Angular 9和10中,在下拉菜单中设置选中项的解决方法如下所示:
// 在组件的TypeScript代码中
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
selectedItem: string;
items: string[] = ['Option 1', 'Option 2', 'Option 3'];
constructor() {
// 设置默认选中项
this.selectedItem = this.items[0];
}
}
在上面的示例中,我们使用了ngModel
指令来绑定下拉菜单的选中项到组件的selectedItem
属性上。通过[(ngModel)]="selectedItem"
,当用户选择下拉菜单中的选项时,selectedItem
的值会自动更新。
在组件的构造函数中,我们将selectedItem
初始化为items
数组的第一个选项,这样初始时就会有一个选中项。
在HTML模板中,我们使用*ngFor
指令遍历items
数组,并为每个选项创建一个元素。通过
[value]="item"
,我们将每个选项的值设置为item
本身。这样,当选项被选择时,selectedItem
的值就会更新为选中的选项。