Question

我有一个员工角度组件，外观如下（请参见下面的HTML部分）。该组件会加载员工列表。

在html中，我遍历“员工”列表，并在每一行中创建一个按钮。对于每个员工。

单击该员工的行时，该按钮将显示该员工的更多详细信息。我想更改单击行按钮时的文本。并不是所有的行按钮（这是我的代码当前正在执行的操作）。但是按钮文本绑定到组件类{{buttonText}}-适用于所有行-以某种方式我认为我需要给每个按钮一个唯一的名称，然后在click事件处理程序中-及其在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

如果我正确回答了您的问题，那么您想根据当前记录显示“隐藏详细信息”或“显示详细信息”

如果是，那很容易

每行有两个带有固定标签的按钮，当单击show时，显示当前显示记录的ID，并在每个按钮上添加* ngIf，例如<div class="img_wrap" style="width: 70%;"> <img class="serviceImg" src="img/1.png"> <p class="serviceText">Sample text</p> </div>表示隐藏按钮，*ngIf="emp.id === currentId"表示显示按钮

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

1 个答案: