Question

所以我有以下代码在主页面上显示表格，我在表格中的每一行都有两个按钮，“编辑”和“删除”。因此，当我单击“编辑”按钮时，将打开模态。现在我的问题是，我需要将按钮点击特定员工的“员工ID”传递给。我怎样才能做到这一点？所以，假设我有一个id为“101”的empoyee，并且想要编辑信息，如何将这个“101”传递给按钮上的编辑模态组件，以便我可以填充该信息的detials员工在我的模态中的文本框中？

@Component({
      selector: 'ops-employee',
      pipes: [],
      styles: [],
      template: `
          <ops-addmodal [(open)]="addEmployeeOpen" (check)="updateEmployeeList($event)"></ops-addmodal>
          <ops-editmodal [(open)]="editEmployeeOpen" [data]="editId" (check)="editEmployeeList($event)">
          </ops-editmodal>
          <div class="col-md-8 col-md-offset-2">
          <h1> Employee Info </h1>
          <hr>
          <button class="btn btn-lg btn-primary" (click)="addEmployee()">Add</button>
          <table class="table table-striped">
           <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Role</th>
              <th>Actions</th>
            </tr>
           </thead>
           <tbody>
            <tr *ngFor = "#employee of employeeDetails">
              <td>{{employee.empName}}</td>
              <td>{{employee.empAge}}</td>
              <td>{{employee.empRole}}</td>
              <td>
              <button class="btn btn-sm btn-default" (click)="editEmployee(employee.empId)">Edit</button>
              <button class="btn btn-sm btn-danger" (click)="deleteEmployee(employee.empId)">Delete</button>
              </td>
            </tr>
           </tbody>
          </table>
          </div>
        `,
      directives: [AddEmployeeModalComponent, EditEmployeeModalComponent, ModalComponent]
    })

Answer 1

因此，据我了解您的代码段，您有另一个组件可以打开模式以编辑您的员工EditEmployeeModalComponent，这可能是此元素<ops-editmodal ...

然后你可以做的是使用@ViewChild来获取这个组件的实例并调用它的公共函数。

首先，您必须向组件<ops editmodal #myEditModal ...

添加ID

然后在你的主要组件中：

export class MyComponent {

     @ViewChild('myEditModal')
     private _editModal:EditEmployeeModalComponent;

     editEmployee( employeeId:number ):void {
         this._editModal.open( employeeId );
     }
 }

并且在您的EditEmployeeModalComponent中，您拥有此open(id:number)功能，可以设置您的模型（或您用于表单的任何内容）并打开您的模式。

希望这有帮助。

如何通过按钮单击角度2将数据从一个组件发送到另一个组件

1 个答案: