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

Question

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

所以我使用了一个类型为 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

我遇到了这个错误

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

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

如何解决这个问题

Answer 1

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

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 任何数据类型。它无法从中找到任何类型信息并给您一个错误。

Answer 2

当你想使用一个对象作为选择值时，你应该绑定到<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

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

Property 'name' does not exist on type 'any[]' during ng build--aot

angular

ng-build