Angular中如何访问接口属性？解决item.id返回undefined问题

首先，你定义的IItem接口如下：

export interface IItem {
 id: number;
 status: any;
 peso: number;
 medidas: any;
 quantidade: number;
 tabela: {
  itemTabela_id: number;
  item_id: number;
  vPromo: number;
  vPromoData: any;
  vVenda: number;
 };
 estoque: {
  estAtual: number;
  item_id: number;
 };
 item_linkWeb: any;
 descricao: string;
 fotos: Array<string>;
}

问题原因 #

在*ngFor循环中，updateQuantidade能正常输出item.id，是因为循环里的let item of cartS.cart.item已经定义了当前迭代的item变量，它指向购物车中的某一个具体商品对象。

而在表单的getFreteByCep调用中，你传递的item变量根本没有在当前模板上下文里定义，所以会传入undefined，自然无法访问item.id。

解决方案 #

根据你的业务场景，分两种情况处理：

情况1：需要给购物车中所有商品计算运费 #

不需要传递单个item，直接在函数内部遍历购物车数组，逐个获取item.id：

getFreteByCep(cep: string) {
  // 遍历购物车所有商品
  this.cartS.cart.item.forEach(item => {
    console.log(item.id); // 正常访问每个商品的ID
    // 在这里执行对应商品的运费计算逻辑
  });
}

模板里修改按钮点击事件，不再传递item：

<button (click)="getFreteByCep(cep)" [ngClass]="{'d-none': (loadingCep)}" class="btn btn-success">Verificar</button>

情况2：需要针对某个特定商品计算运费 #

先在组件类中定义一个变量存储选中的商品：

selectedItem: IItem | undefined;

// 比如在商品列表的点击事件中设置选中项（可根据你的交互调整）
selectItem(item: IItem) {
  this.selectedItem = item;
}

然后在模板中，给商品添加选中逻辑（比如点击商品行时触发）：

<tr *ngFor="let item of cartS.cart.item; let i = index" (click)="selectItem(item)">
  <!-- 原有内容不变 -->
</tr>

最后修改表单按钮的点击事件，传递选中的商品：

<button (click)="getFreteByCep(cep, selectedItem)" [ngClass]="{'d-none': (loadingCep)}" class="btn btn-success">Verificar</button>

并在函数中增加空值判断：

getFreteByCep(cep: string, item?: IItem) {
  if (!item) {
    console.log('请先选择要计算运费的商品');
    return;
  }
  console.log(item.id); // 正常访问选中商品的ID
  // 后续运费计算逻辑
}

额外纠正：test函数的语法错误 #

你提供的test函数存在语法错误，正确的写法应该是接收一个IItem类型的参数，然后访问其id：

test(item: IItem) {
  console.log(item.id);
}

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