Angular Ionic数据绑定场景下如何将html中遍历的prod参数传递到ts

• 如果你需要在ion-toggle的状态切换事件中获取产品参数，直接在事件绑定时把遍历到的prod作为参数传入对应方法即可，修改后的模板代码如下：

<ion-item *ngFor="let prod of listProdotti | filter:searchItem">
  <ion-label>{{ prod.NomeProdotto }}</ion-label>
  <ion-label>{{ prod.Reference }}</ion-label>
  <!-- 新增prod作为statusProduct的第二个入参 -->
  <ion-toggle color="primary" [checked]="prod.Pubblicato == 'Si' ? true: false" (ionChange)="statusProduct($event, prod)"></ion-toggle>
  <ion-icon style="cursor: pointer;" name="trash" color="danger" (click)="deleteProduct(prod.IDProdotto, prod.NomeProdotto)"></ion-icon>
</ion-item>

• 同步修改.ts文件中的方法定义，匹配入参结构即可直接取用产品ID：

// 产品状态切换方法
statusProduct(event: any, prod: any) {
  // 直接获取产品ID发起请求
  const targetProductId = prod.IDProdotto;
  console.log('当前操作的产品ID：', targetProductId);
  // 此处写你的HTTP请求逻辑
}

// 原有删除方法已经可以正常获取传入的产品ID，若无法取值可先排查入参类型
deleteProduct(productId: number, productName: string) {
  console.log('待删除产品ID：', productId);
}

• 如果仍然无法正常获取参数，按以下步骤排查：
  • 先在模板中添加{{ prod.IDProdotto }}打印字段，确认遍历的原始数据本身存在IDProdotto属性，若模板中打印为空，说明listProdotti的赋值逻辑有问题
  • 暂时移除filter管道，直接遍历原始数组测试参数传递，排除管道修改原数据结构的可能性
  • 若TS严格模式下报属性不存在的错误，给产品定义明确的接口类型即可：

interface IProduct {
  IDProdotto: number;
  NomeProdotto: string;
  Reference: string;
  Pubblicato: string;
  // 补充其余产品字段
}

// 声明产品数组类型
listProdotti: IProduct[] = [];

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