Question

我使用的是Angular，想在用户单击时获取表中行的索引。当我尝试获取时，它始终返回0。因为我在tr中只有一个tbody，但是甚至我$('table td')仍然能获得相同的索引。我应该改变什么？

HTML表

<table id="example" class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Student Number</th>
            <th>Department</th>
            <th>Photo</th>
          </tr>
        </thead>
        <tbody *ngFor="let studentsEl of items2">
          <tr>
            <td>{{studentsEl.name}}</td>
            <td>{{studentsEl.age}}</td>
            <td>{{studentsEl.stuNumber}}</td>
            <td>{{studentsEl.department}}</td>
            <td>
                    <img
                    [src]="studentsEl.imagePath"
                    alt="{{ studentsEl.name }}"
                    class="img-responsive"
                    style="max-height: 75px;"> 
            </td>       
          </tr>
        </tbody>
      </table>

组件的打字稿文件

 constructor() {
    $(document).ready( function() {
      $('table tr').click( function() {
          alert($(this).index());
      }); 
  });

Answer 1

这里您有几个问题：

对表行使用ngFor
您不应在构造函数中使用dosument.ready，而应创建一个方法和click处理程序。

这是HTML：

<table id="example" class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Student Number</th>
            <th>Department</th>
            <th>Photo</th>
          </tr>
        </thead>
        <tbody >
          <tr *ngFor="let studentsEl of items2; let idx = index">
            <td>
               <span (click)="getIndex(idx)">
                   {{studentsEl.name}} yourIndex: {{ idx  }}
               </span>
            </td>
            <td>{{studentsEl.age}}</td>
            <td>{{studentsEl.stuNumber}}</td>
            <td>{{studentsEl.department}}</td>
            <td>
                    <img
                    [src]="studentsEl.imagePath"
                    alt="{{ studentsEl.name }}"
                    class="img-responsive"
                    style="max-height: 75px;"> 
            </td>       
          </tr>
        </tbody>
      </table>

您的打字稿文件：

getIndex(idx){
    console.log(idx);
}

尝试获取选定的行索引时获得相同的索引

1 个答案: