Angular/Ionic ngFor 循环中动态元素交互与数据绑定的高效策略

<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>

// component.ts
import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {
  lines: any[] = [
    { id: 1, name: 'Product A', quantity: 10 },
    { id: 2, name: 'Product B', quantity: 20 },
  ];
  listCant: number[] = []; // 用于存储数量

  onChangeCantidad(index: number, value: string) {
    this.listCant[index] = Number(value);
    console.log(`Index ${index} quantity changed to: ${this.listCant[index]}`);
  }

  checkEvent(event: any, item: any, index: number, inputElementValue: string) {
    console.log(`Checkbox clicked for item ${item.name} at index ${index}. Input value: ${inputElementValue}`);
    // 如果需要访问整个元素实例，可以这样传递：
    // checkEvent(event: any, item: any, index: number, el: HTMLElement) {
    //   console.log('Element value:', el.value);
    //   console.log('Element placeholder:', el.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)="onQuantityChange(i, $event)">
          </ion-input>
        </ion-item>
      </ion-col>
      <ion-col size="1" class="centered">
        <ion-checkbox id="{{'checkboxLine_'+i}}" checked="false"
                      (click)="checkEventWithModel(item, i)">
        </ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-col>
</ion-row>

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-my-component.component.scss'],
})
export class MyComponent {
  lines: any[] = [
    { id: 1, name: 'Product A', quantity: 10 },
    { id: 2, name: 'Product B', quantity: 20 },
  ];
  listCant: number[] = []; // 用于存储数量

  constructor() {
    // 初始化 listCant，确保每个索引都有值，避免 undefined
    this.lines.forEach((line, index) => {
      this.listCant[index] = line.quantity; // 或者根据需要设置默认值
    });
  }

  onQuantityChange(index: number, value: number) {
    this.listCant[index] = value;
    console.log(`Index ${index} quantity updated via ngModel: ${this.listCant[index]}`);
  }

  checkEventWithModel(item: any, index: number) {
    const currentQuantity = this.listCant[index];
    console.log(`Checkbox clicked for item ${item.name} at index ${index}. Quantity from model: ${currentQuantity}`);
    // 现在可以直接从 this.listCant[index] 获取到最新的值
  }
}

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-my-component.component.html',
  styleUrls: ['./my-my-component.component.scss'],
})
export class MyComponent {
  // ... 其他代码 ...

  getPlaceholderAttribute(index: number) {
    // 确保元素ID是唯一的，例如 'cantidadLine_0', 'cantidadLine_1'
    const element = document.getElementById(`cant_${index}`);
    if (element) {
      // 获取 input 元素（如果 id 赋给了 ion-input，则直接使用 element）
      // 如果 id 赋给了父元素，需要进一步查找
      const inputElement = element.getElementsByTagName('input')[0];
      if (inputElement) {
        const placeholder = inputElement.getAttribute('placeholder');
        console.log(`Input at index ${index} has placeholder: ${placeholder}`);
        return placeholder;
      }
    }
    return null;
  }
}