角度组件 html 表行按钮 - 单击事件处理程序需要更改按钮的文本

Question

我有一个员工角度组合，如下所示(请参阅下面的HTML部分(。 该组件加载员工列表。

在 html 中，我通过"员工"列表进行交互，并在每行中创建一个按钮。 对于每个员工。

该按钮用于在单击员工所在行时显示员工的更多详细信息。 我想在单击时更改行按钮的文本。 而不是所有的行按钮(这是我的代码当前正在做的事情(。 但是按钮文本绑定到组件类 {{buttonText}} - 这适用于所有行 - 不知何故，我认为我需要为每个按钮提供一个唯一的名称，然后在单击事件处理程序中 - 以及它在 Typescript 代码集中的实现按钮文本(但现在只有单击的单行按钮( - 说"隐藏详细信息((而不是"显示详细信息"(。

这个解决方案逃脱了我 - 因为类组件中的事件处理程序"ShowHideEmployedDetails(row_no("现在需要访问其视图的 dom 项。

有什么想法吗？

<tbody>
<tr *ngFor="let emp of employees; let row_no = index ">
<!-- <td>{{emp.id }}</td> -->
<!-- <td><a [routerLink]="['/emp',emp.id]">{{emp.id }}</a></td> -->
<td (click)="showDetails(emp.id)" class="mouse" >{{emp.id}}</td>
<td>{{emp.name | empTitle:emp}}</td>
<td>{{emp.gender}}</td>
<td><button name="buttonNr{{row_no}}" (click)="ShowHideEmployedDetails(row_no)">
{{buttonText}}</button></td>
</tr>
</tbody>

import { Injectable } from '@angular/core';
import {Employee} from  './employee/employee'
@Injectable()
export class EmployeeDataService {
constructor() { }
getEmployees(): Employee[] {
return[
{id:101,gender:'male',name:'Jack',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
{id:102,gender:'male',name:'Pater',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
{id:103,gender:'female',name:'Ankita',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
{id:104,gender:'female',name:'Rose',address:'Dubai City', salary:4000, hourlyWage:'4000'  }
];
}

}

import { Component, OnInit } from '@angular/core';
import { EmployeeDataService } from '../employee-data.service';
import { Employee } from './employee';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
employees: Employee[];
status:boolean=false;
index:number;
id:number;
diff:number
buttonText: string = "Show Details";

constructor(private _empService:EmployeeDataService) { }
ngOnInit() {
this.employees = this._empService.getEmployees();
}
showDetails(id){
this.id=id;
this.status=true;
}
ShowHideEmployedDetails(id){
this.index= id;
this.status= !this.status;
this.buttonText = this.status ? "Hide Details" : "Show Details";
}
}

<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Details</th>
<!-- <th>Address</th>
<th>Salary</th>
<th>Hourly average</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let emp of employees; let row_no = index ">
<!-- <td>{{emp.id }}</td> -->
<!-- <td><a [routerLink]="['/emp',emp.id]">{{emp.id }}</a></td> -->
<td (click)="showDetails(emp.id)" class="mouse" >{{emp.id}}</td>
<td>{{emp.name | empTitle:emp}}</td>
<td>{{emp.gender}}</td>
<td><button name="buttonNr{{row_no}}" (click)="ShowHideEmployedDetails(row_no)">
{{buttonText}}</button></td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<br/>
<div *ngIf="status">
<table  class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Address</th>
<th>Salary</th>
<th>Hourly average</th>
</tr>
</thead>
<tbody>
<tr *ngIf="status">
<td>{{employees[index].id}}</td>
<td>{{employees[index].name}}</td>
<td>{{employees[index].gender}}</td>
<td>{{employees[index].address}}</td>
<td>{{employees[index].salary}}</td>
<td>{{employees[index].hourlyWage}}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

如果我正确回答了您的问题，您希望根据当前记录显示"隐藏详细信息"或"显示详细信息"(如果您单击

如果是，这很容易

每行有两个按钮，带有固定标签，当单击显示当前显示记录的保留 ID，并在每个按钮上添加 *ngIf，例如*ngIf="emp.id === currentId"用于隐藏按钮和*ngIf="emp.id !== currentId"用于显示按钮