如何从对象数组填充的选择字段中获取选定对象或索引

Question

这是一个初学者的问题。请不要开枪。

在Angular的HTML组件中，我从一个对象数组中创建了一个select字段。

我想用一个方法检索这个选择。

我不能使用"value"或";selectedIndex"关于我的getElementById方法(错误:TS2339:属性'value'/'selectedIndex'不存在类型'HTMLElement'.

的对象

export class VehicleModel {
id: number;
brand: string;
capacity: number;
model: string;
consumption: number;
range: number;
}

HTML

<select id="selectVehicle" (change)=setupVehicle() value="Choose a vehicle">
<option *ngFor="let vehicle of vehicles" [value]="vehicle"> {{vehicle.brand + ' ' + vehicle.model}} </option>
<option> Choose a vehicle </option>

脚本

vehicles: Array<VehicleModel> = [];
selectedVehicle: VehicleModel;
ngOnInit(): void {
this.populateCarSelection()
}
populateCarSelection(): void{
this.vehicleService.getAllVehicles().subscribe(data => this.vehicles = data)
}
setupVehicle(){
const vehicleSelection = this.document.getElementById('selectVehicle');
// const index = vehicleSelection.selectedIndex; error : TS233
// const vehicle = vehicleSelection.value; error : TS233
}

在这些条件下如何从select字段获得选择?

编辑:

对于那些有同样问题的人，我是这样做的:对象

export class VehicleModel {
public constructor(init?: Partial<VehicleModel>) {
Object.assign(this, init);
}
id: number;
brand: string;
capacity: number;
model: string;
consumption: number;
range: number;
}

HTML

<form [formGroup]="vehicleFormGroup" (change)="selectVehicle()">
<select id="vehicle" value="Choose a vehicle" formControlName="id">
<option value ="" disabled> Choose a vehicle </option>
<option *ngFor="let vehicle of vehicles" [ngValue]="vehicle"> {{vehicle.brand + ' ' + vehicle.model}} </option>
</select>

脚本

vehicles: Array<VehicleModel> = [];
vehicleFormGroup: FormGroup;
selectedVehicle;
constructor(@Inject(DOCUMENT) private document: Document, private vehicleService: VehicleService, private fb: FormBuilder) {
this.vehicleFormGroup = this.fb.group({
vehicle:  new FormControl(''),
})
ngOnInit(): void {
this.populateCarSelection()
}
populateCarSelection(): void{
this.vehicleService.getAllVehicles().subscribe(data => this.vehicles = data)
}
selectVehicle() {
console.log('vehicle selected');
this.selectedVehicle = <VehicleModel> this.vehicleFormGroup.value.vehicle;
console.log(this.selectedVehicle)
}

Answer 1

有多种方法可以从下拉列表中获得选择项。更优雅的方法是创建模板驱动表单或响应式表单。

对于快速修复，您可以将模板引用变量分配给select标记并将其值发送给事件处理程序。注意，(change)事件处理程序应该在<select>标签中，而不是在<option>标签中。

模板

<select 
#vehicleSelect 
(change)="setupVehicle(vehicleSelect.value)" 
value="Choose a vehicle"
>
<option> Choose a vehicle </option>
<option *ngFor="let vehicle of vehicles" [value]="vehicle"> {{vehicle.brand + ' ' + vehicle.model}}  </option>
</select>

控制器

setupVehicle(vehicleSelection: VehicleModel) {
console.log(vehicleSelection);
}

同样，虽然这可能在短期内解决问题，但您需要使用模板驱动或响应式表单来实现表单的可伸缩性。

变量vehicle被赋值为类型VehicleModel而不是类型定义是怎么回事?这可能会导致其他问题，因为模板中有一个[value]="vehicle"绑定。

更新:使用ngModel的双向绑定

1. 您实际上需要使用[ngValue]而不是[value]绑定值。[ngValue]允许将其他类型(包括string)绑定到options。

2. 我现在知道一个属性，这个属性持有被绑定的对象选项使用[ngValue]。因此，您可以快速地在控制器中创建一个变量，然后使用ngModel将其双向绑定到<select>，而不是使用模板引用变量。

试试下面的

控制器

export class AppComponent {
selectedVehicle: VehicleModel | string = "Choose a vehicle";
vehicles: VehicleModel[] = [
...
];
setupVehicle() {
console.log(this.selectedVehicle);
}
}

模板

<select
[(ngModel)]="selectedVehicle"
(change)="setupVehicle()"
>
<option> Choose a vehicle </option>
<option *ngFor="let vehicle of vehicles" [ngValue]="vehicle"> 
{{ vehicle.brand + ' ' + vehicle.model }} 
</option>
</select>

示例:Stackblitz