属性"数量"在类型"列表模型服务器[]"上不存在

Question

我试图访问一个返回的可观察对象，但我得到的错误，该值不存在。我想访问接口

的属性下面是代码

接口类

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

错误来自于increase()和reduce()方法。

this.list.quantity

如何在另一个类中正确访问接口的属性?

Answer 1

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

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