[英]Property 'id' does not exist on type 'never' in find function
I am working with angular and have cascading selects 我正在使用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'];
}
In the function onSelectArea
I am getting an error on element.id
在函数onSelectArea
我在element.id
上遇到错误
"[ts] Property 'id' does not exist on type 'never'." “ [ts]属性'id'在类型'never'上不存在。”
Any ideas? 有任何想法吗? Thanks in advance 提前致谢
That error you're getting from the compiler is due to selectedAreas
not being declared properly. 您从编译器收到的错误是由于selectedAreas
声明不正确造成的。 By doing property: []
you define a property that can only hold an empty array. 通过执行property: []
您可以定义只能容纳一个空数组的属性。
Use the following instead, which sets the default value (as opposed to the type): 请改用以下命令,它设置默认值(与类型相反):
selectedAreas = []; // note the equal sign
Or better yet: 或者更好:
selectedAreas: Area[] = [];
where Area
would be a class where you define its properties. 其中Area
是您定义其属性的类。
You also have the same issue for your other properties ( property: {}
defines a property that can only be an empty object). 您的其他属性也有同样的问题( property: {}
定义了只能是空对象的属性)。
Adding on the top of Jeto's answer: 在Jeto的答案之上添加:
You might want to specify the types of element
as any
in the callbacks to the find
method to avoid any compilation errors: 您可能希望在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'];
}
}
And in your Template: 在您的模板中:
<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>
Here's a Sample StackBlitz for your ref 这是供您参考的示例StackBlitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.