Angular/Ionic中ngFor循环内元素引用与数据绑定深度解析

<!-- 这种写法在 (click) 事件中是错误的 -->
<ion-checkbox id="{{'checkboxLine_'+i}}" checked="false" 
  (click)="checkEvent($event, item, i, [{{'cant_'+i}}].value)">
</ion-checkbox>

<ion-row *ngFor="let item of lines; let i= index" [value]="item">
  <ion-col>         
    <ion-row>      
      <ion-col size="3" class="centered">
        <ion-item class="ion-no-padding">    
          <!-- 定义模板引用变量 #cantID -->
          <ion-input #cantID 
                     type="number" 
                     id="{{'cant_'+i}}" 
                     class="font_mini centered alignright" 
                     (input)="onChangeCantidad(i, cantID.value)">
          </ion-input>
        </ion-item>
      </ion-col>
      <ion-col size="1" class="centered">
          <ion-checkbox id="{{'checkboxLine_'+i}}" 
                        checked="false" 
                        (click)="checkEvent($event, item, i, cantID.value)"> 
          </ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-col>
</ion-row>

// 假设 checkEvent 方法在你的 .ts 文件中
checkEvent(event: any, item: any, index: number, elValue: string) {
  console.log('索引:', index);
  console.log('关联的值:', elValue);
  // ... 其他逻辑
}

// 如果你传递的是整个元素引用，而不是它的值
// (click)="checkEvent($event, item, i, cantID)"
// 那么在组件方法中可以这样接收：
checkEventWithElement(event: any, item: any, index: number, el: HTMLElement) {
  console.log('元素值:', el.value);
  console.log('元素placeholder属性:', el.getAttribute('placeholder'));
  // 注意：在Ionic中，el可能是一个ElementRef，此时需要使用 el.nativeElement
  // console.log('元素值:', (el as ElementRef).nativeElement.value);
  // console.log('元素placeholder属性:', (el as ElementRef).nativeElement.getAttribute('placeholder'));
}

<ion-row *ngFor="let item of lines; let i= index" [value]="item">
  <ion-col>         
    <ion-row>      
      <ion-col size="3" class="centered">
        <ion-item class="ion-no-padding">    
          <!-- 使用 [(ngModel)] 绑定到组件中的数组 -->
          <ion-input type="number" 
                     id="{{'cant_'+i}}" 
                     class="font_mini centered alignright"
                     [(ngModel)]="listCant[i]" 
                     (ngModelChange)="onCantidadChange(i, $event)">
          </ion-input>
        </ion-item>
      </ion-col>
      <ion-col size="1" class="centered">
          <ion-checkbox id="{{'checkboxLine_'+i}}" 
                        checked="false" 
                        (click)="checkEventWithNgModel(item, i)"> 
          </ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-col>
</ion-row>

export class MyComponent {
  lines: any[] = [/* ...你的数据 */];
  listCant: number[] = []; // 用于存储每行输入框的值

  constructor() {
    // 初始化 listCant 数组，确保其长度与 lines 匹配，并提供默认值
    this.listCant = new Array(this.lines.length).fill(0); 
  }

  onCantidadChange(index: number, newValue: number) {
    this.listCant[index] = newValue;
    console.log(`索引 ${index} 的数量更新为: ${newValue}`);
  }

  checkEventWithNgModel(item: any, index: number) {
    // 直接从组件的 listCant 数组中获取对应索引的值
    const cantidad = this.listCant[index];
    console.log('选中的项:', item);
    console.log('索引:', index);
    console.log('对应输入框的值:', cantidad);
    // ... 其他逻辑
  }
}

// 模板中：
// (click)="checkEventWithElement($event, item, i, cantID)"

// 组件中：
checkEventWithElement(event: any, item: any, index: number, el: HTMLElement) {
  const placeholder = el.getAttribute('placeholder');
  console.log('输入框的placeholder:', placeholder);
  // ...
}