如何将表行数据传递给弹出模式？

Question

我目前正在处理更新表行。我有一张带有行列表的表

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><a (click)="editPopUp()">Edit</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><a (click)="editPopUp()">Edit</a></td>
    </tr>
  </tbody>
</table>

在“编辑”上单击将弹出一个模态对话框，其中包含用于编辑所选行的表格。此editPopUp函数显示模态。

ts

editPopUp(){
    this.modalOn = true;
}

模态

<app-dialog
    [showDialog]="modalOn"
    [titleText]="modalTitle"
    [hideNegative]="true"
    [hidePositive]="true"
    (closeButtonClicked)="this.resetModal()"
    [level]="1"
>
    <form
            [formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
            (ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
        >
    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td><input type="text" formControlName="first_name" name="first_name"></td>
            <td><input type="text" formControlName="last_name" name="last_name"></td>
            <td><a (click)="update()">Edit</a></td>
        </tr>
        </tbody>
    </table>
    </form>
</app-dialog>

我不确定如何将行数据传递到此弹出窗口？ 任何帮助请

Answer 1

<!--TableDataComponent.html-->

  <table>
    <tr>
       <th>id</th>
       <th>name</th>
    </tr>
    <tr *ngFor = "let data of dataList">
      <td>{{data.id}}</td>
      <td>{{data.name}}</td>
      <td><button (click) = "editPopUpmodal(data)">Edit</button></td>
    </tr>
  </table>

  <!--Modal Pop Up -->
   <div *ngIf="showModalPopUp">
        <input type="text" [(ngModel)] = "editData.id" />
        <input type = "text" [(ngModel)] = "editData.name" />
        <button (click) = "updateData(editData)" > Update </button>
   </div> 

想象一下，上面是您用于表和弹出窗口的代码（请注意，没有什么特定于Modal的东西，我只是将一个元素显示为模式），它们都位于同一component.html中。

//TypeScript

   editData:any = {};
   showModalPopUp : boolean = false;

    //Constructor, ngOnInit and so on will come

   editPopUpmodal = (data) => {
      this.showModalPopUp = true;
      this.editData = Object.assign(data);
   }

 updateData = (updatedData) => {
  //Call the API through the data service to update the object
}