TypeScript报错ListModelServer[]类型不存在quantity属性如何解决

1. 你在组件中声明的list是ListModelServer[]数组类型，而非单个ListModelServer对象，数组本身不存在quantity属性，只有数组内的单个元素才包含接口定义的quantity字段，这是触发类型报错的直接原因。
2. 服务层存在类型不匹配的隐藏问题：你的返回接口ListModelServerResponse中stores被定义为any类型，且你在map操作时直接返回response.stores，但方法声明的返回值是ListModelServer[]，类型对应关系不严谨。

1. 先修复服务层类型定义 #

首先确认后端返回的商品列表对应哪个字段：

• 如果是stores字段承载商品列表，修改接口定义把stores的类型明确为数组：

export interface ListModelServerResponse {
    stores: ListModelServer[]; // 替换原有的any类型
    count: number;
    list: ListModelServer[];
}

• 如果是list字段承载商品列表，修改服务层的map逻辑：

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

2. 调整组件的数量操作逻辑 #

你当前的@ViewChild只能拿到列表中的第一个数量输入框，不适配多商品列表的场景，需要把增减方法改造为接收当前操作的商品对象和对应的输入框元素：

先修改模板代码（循环渲染商品列表部分） #

<div *ngFor="let product of list">
  <div>商品名：{{product.name}} 库存：{{product.quantity}}</div>
  <input type="number" #quantityInput value="1" min="1" [max]="product.quantity">
  <button (click)="Increase(product, quantityInput)">+</button>
  <button (click)="Decrease(quantityInput)">-</button>
</div>

再修改组件的增减方法 #

// 注意原代码有连续两次value++的逻辑错误，已修正
Increase(product: ListModelServer, input: HTMLInputElement) {
  let value = parseInt(input.value);
  value++;
  if (product.quantity >= 1 && value > product.quantity) {
    value = product.quantity;
  }
  input.value = value.toString();
}

Decrease(input: HTMLInputElement) {
  let value = parseInt(input.value);
  value--;
  if (value < 1) {
    value = 1;
  }
  input.value = value.toString();
}

如果你的场景确实只需要操作列表中某一个固定位置的商品，也可以直接通过数组下标访问属性，比如操作第一个商品的写法是this.list[0].quantity，但更推荐上面的传参写法适配通用列表场景。

内容的提问来源于stack exchange，提问作者glimz