如何在角度 6 中获取表第一列 td 值答案

【问题标题】：How to get table's first column td value in angular 6如何在角度 6 中获取表第一列 td 值
【发布时间】：2019-11-21 11:51:18
【问题描述】：

在选定的下拉列表更改值后尝试获取表的第一列 td 值但不起作用。我想在角度 6 中选择下拉列表后获取第一列 td 值。我在下面给出了我的代码。任何人都可以有想法吗？请帮助找到解决方案。

<table class="table table-striped table-hover" id="wrapperTbl">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Job</th>
        <th>YearJoined</th>
        <th>Missions</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
        <td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
        <td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
        <td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
        <td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
        <select (change)="selected()">
        <option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
        </select>
    </tr>
</tbody>

演示： https://stackblitz.com/edit/how-to-show-the-dynamic-table-with-dropdown-in-angular-todepv?file=app%2Fapp.component.html

【问题讨论】：

标签： angular6 angular7 angular8

【解决方案1】：

您可以执行以下操作 -

<tbody>
        <tr *ngFor="let astronaut of astronautsToBeSelected" class="clickable">
            <td (click)="selectAstronaut(astronaut)">{{astronaut.id}}</td>
            <td (click)="selectAstronaut(astronaut)">{{astronaut.name}}</td>
            <td (click)="selectAstronaut(astronaut)">{{astronaut.job}}</td>
            <td (click)="selectAstronaut(astronaut)">{{astronaut.year_joined}}</td>
            <td><select (change)="selected($event, astronaut.id)">
            <option *ngFor="let mission of astronaut.missions" [selected]="mission.name == 'back'">{{mission}} </option>
            </select>
      </td>
        </tr>
    </tbody>

当你想访问任何事件时，你需要 html 中的 $event。您还可以传递所需的其他参数。

selected(event, id){

   //tbal id is wrapperTbl

alert(event.target.value + '|' + id )


}

希望这会有所帮助。

【讨论】：