属性 'quantity' 在类型 'ListModelServer[]' 上不存在

Question

我正在尝试访问返回的可观察对象，但收到该值不存在的错误。我要访问接口属性

下面是代码

界面class

export interface ListModelServer {
    id: Number;
    name: String;
    category: String;
    description: String;
    image: String;
    price: Number;
    quantity: Number;
    images: String;
  }
  
  export interface ListModelServerResponse {
    stores: any;
    count: number;
    list: ListModelServer[];
  }

这里是服务class

 //get all products
  getAllProducts(storeId: Number): Observable<ListModelServer[]> {
    return this.http.get<ListModelServerResponse>(this.url + 'list/' + storeId)
    .pipe(map(response => response.stores
      ));;
  }

在组件中，我想使用接口中定义的字段

export class FoodListComponent implements OnInit {

  list: ListModelServer[];
  
  @ViewChild('quantity') quantityInput!: any;

constructor(private listService: ListService, private router: Router, private route: ActivatedRoute,
            private cartService: CartService
  
            ) {
}
  
  ngOnInit(): void {
    
    //fetch all prod for a particular store
      this.listService.getAllProducts(this.storeId).subscribe(food => {

        this.list = food;
        console.log(this.list);
      });    
   }


  Increase() {
    let value = parseInt(this.quantityInput.nativeElement.value);
    value++;
    if (this.list.quantity >= 1){
      value++;

      if (value > this.list.quantity) {
        // @ts-ignore
        value = this.list.quantity;
      }
    } else {
      return;
    }

    this.quantityInput.nativeElement.value = value.toString();
  }

  Decrease() {
    let value = parseInt(this.quantityInput.nativeElement.value);
    value--;
   /*  if (this.list.quantity > 0){
      value--;

      if (value <= 0) {
        // @ts-ignore
        value = 0;
      }
    } else {
      return;
    } */
    this.quantityInput.nativeElement.value = value.toString();
  }
}

错误来自 increse() 和 decrease() 方法。

this.list.quantity

如何正确访问另一个接口的属性 class??

Answer 1

由于您正在处理包含数量的对象列表，因此您必须定义要在哪个元素上 increase/decrease 数量。检查下面的代码：

 Increase(indexOfElementQuantity: number) {
    let value = parseInt(this.quantityInput.nativeElement.value);
    value++;
    if (this.list[indexOfElementQuantity].quantity >= 1){
      value++;

      if (value > this.list[indexOfElementQuantity].quantity) {
        // @ts-ignore
        value = this.list[indexOfElementQuantity].quantity;
      }
    } else {
      return;
    }

    this.quantityInput.nativeElement.value = value.toString();
  }

当然你也可以传递特定对象的id

  Increase(listModelId: number) {
    let value = parseInt(this.quantityInput.nativeElement.value);
    let listModel = this.list.find(x => x.id === listModelId)[0];
    value++;
    if (listModel.quantity >= 1){
      value++;

      if (value > listModel.quantity) {
        // @ts-ignore
        value = listModel.quantity;
      }
    } else {
      return;
    }

    this.quantityInput.nativeElement.value = value.toString();
  }

属性 'quantity' 在类型 'ListModelServer[]' 上不存在

Property 'quantity' does not exist on type 'ListModelServer[]'

angular

typescript

angular-ui-router