如何通過在 angular 8 中選中的復選框獲取表的 td 值

Question

我的問題很簡單。我試圖通過選中復選框來獲取 td 值。當我單擊復選框時，我想獲得相同的行產品名稱。怎么做？

演示： https://stackblitz.com/edit/angular-ol2sir?file=src/app/app.component.ts

app.component.ts：

 getProoduct(e){ 
     if(e.target.checked) 
      { 
       const target = e.originalEvent.toElement.closest('tr'); 
       let tdProduct= target.querySelector('td:nth-child(3)').innetText; 
       console.log(tdProduct); 
      }  
 }

Answer 1

只需將您的復選框 td 替換為

    <td> <input type="checkbox" [(ngModel)]="data.isSelected" (change)="getProoduct(data.isSelected, data.product_name)"> </td>

現在 function 與

  getProoduct(isSelected, product){
    console.log(isSelected, product)
  }

完整的工作示例： https://stackblitz.com/edit/angular-glxfq5

實際上，您可以直接將data傳遞給 function 並提供所有字段，以防您將來還需要p_id或任何其他字段。