[英]Property 'id' does not exist on type 'never' in find function
我正在使用angular并进行级联选择
city: {};
area: {};
selectedAreas: [];
selectedSuburbs: [];
arrAddress = [{
city: "Auckland",
id: 1,
areas: [{
area: "Waitakere",
id: 11,
suburbs: [{
suburb: "Rodney",
id: 12
},
{
suburb: "North Shore",
id: 13
},
{
suburb: "City",
id: 14
},
]
}]
}];
onSelectCity(e) {
this.city = this.arrAddress.find(element => element.id === Number(e.value));
this.selectedAreas = this.city['areas'];
}
onSelectArea(e) {
this.area = this.selectedAreas.find(element => element.id === Number(e.value));
this.selectedSuburbs = this.area['suburbs'];
}
在函数onSelectArea
我在element.id
上遇到错误
“ [ts]属性'id'在类型'never'上不存在。”
有任何想法吗? 提前致谢
您从编译器收到的错误是由于selectedAreas
声明不正确造成的。 通过执行property: []
您可以定义只能容纳一个空数组的属性。
请改用以下命令,它设置默认值(与类型相反):
selectedAreas = []; // note the equal sign
或者更好:
selectedAreas: Area[] = [];
其中Area
是您定义其属性的类。
您的其他属性也有同样的问题( property: {}
定义了只能是空对象的属性)。
在Jeto的答案之上添加:
您可能希望在find
方法的回调中将element
的类型指定为any
,以避免任何编译错误:
import { Component } from '@angular/core';
@Component({...})
export class AppComponent {
city = {};
area = {};
selectedAreas: any[] = [];
selectedSuburbs: any[] = [];
arrAddress = [...];
onSelectCity(e) {
this.city = this.arrAddress.find((element: any) => element.id === Number(e.value));
this.selectedAreas = this.city['areas'];
}
onSelectArea(e) {
this.area = this.selectedAreas.find((element: any) => element.id === Number(e.value));
this.selectedSuburbs = this.area['suburbs'];
}
}
在您的模板中:
<select (change)="onSelectCity($event.target)">
<option value="null">Select a City</option>
<option *ngFor="let city of arrAddress" [value]="city.id">{{ city.city }}</option>
</select>
<br><br>
<select (change)="onSelectArea($event.target)" [disabled]="!selectedAreas">
<option value="null">Select an Area</option>
<option *ngFor="let area of selectedAreas" [value]="area.id">{{ area.area }}</option>
</select>
这是供您参考的示例StackBlitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.