在 ng 构建期间，属性'name'在类型 'any[]' 上不存在 - aot

Question

我有一个下拉列表和一个输入字段。根据下拉列表的选择，设置输入字段值。

所以我使用了一个any(array(类型的数组。

在我的.ts文件中，我这样写

Services: Array<any>=[
{name: 'Consultation', price: 100}, 
{name: 'Follow Up', price: 200}, 
{name: '24 Hrs. Creatinine', price: 300}, 
{name: 'Complete Blood Count - CBC', price: 400}, 
{name: 'X-Ray', price: 500}];
selectedservice = this.Services;

在HTML中，我写了这样的

<div class="col-sm-9">
<nb-select type="number" fullWidth id="service" [(ngModel)]="selectedservice"
[ngModelOptions]="{standalone: true}" required>
<nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option>
</nb-select>
</div>
<div class="col-sm-9">
<input type="number" nbInput fullWidth id="price1" [disabled]="true"
value="{{selectedservice.price}}" class="form-control" />

当我运行构建命令时，ng build --aot

我收到这个错误

类型"any[]"上不存在属性"name"。

类型"any[]"上不存在属性"price"。

如何解决此

Answer 1

如果要使用对象作为选定值，则应绑定到<option>元素中的[ngValue]。当值为字符串时，请使用[value]。

<div class="col-sm-9">
<nb-select type="number" fullWidth id="service" 
[(ngModel)]="selectedservice"
[ngModelOptions]="{standalone: true}" required>
<nb-option *ngFor="let service of Services" [ngValue]="service">
{{service.name}} 
</nb-option>
</nb-select>
</div>
<div class="col-sm-9">
<input *ngIf="selectedservice" type="number" nbInput fullWidth id="price1" [disabled]="true"
value="{{selectedservice.price}}" class="form-control" />
</div>

使用源数组初始化selectedservice也是没有意义的。您应该将其设置为您的选项之一。

selectedservice = this.Services[0];

演示：https://stackblitz.com/edit/angular-rg8myc

Answer 2

始终尝试提供有效的数据类型，避免使用任何数据类型。最好创建一个接口并在代码中使用它。

interface ServiceInterface {
name: string;
price: number;
}

在代码中使用此接口。

Services: ServiceInterface[] = [
{name: 'Consultation', price: 100}, 
{name: 'Follow Up', price: 200}, 
{name: '24 Hrs. Creatinine', price: 300}, 
{name: 'Complete Blood Count - CBC', price: 400}, 
{name: 'X-Ray', price: 500}];

当您在*ngFor中使用它时，您希望访问object的属性，这意味着您假设它为object，但在声明中，您已将它创建为任何数据类型的array。它无法从中找到任何类型信息，并给您一个错误。