У меня есть угловой компонент сотрудника, который выглядит как показано ниже (см. 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>