“ListModelServer[]”型別上不存在屬性“數量”-有解無憂

我正在嘗試訪問回傳的 observable，但我收到該值不存在的錯誤。我想訪問介面的屬性

下面是代碼

介面類

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[];
  }

這是服務類

 //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() 和 reduce() 方法。

這個.list.quantity

如何正確訪問另一個類中介面的屬性？

uj5u.com熱心網友回復：

由于您正在處理包含數量的物件串列，因此您必須定義要增加/減少數量的元素。檢查下面的代碼：

 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();
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334770.html

標籤：有角的打字稿 angular-ui-路由器

上一篇：如何使用try和catch這樣的函式來測驗promise

下一篇：觸發方法的rxjs倒計時