首页 文章

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

提问于
浏览 次
0

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

<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>

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

angular6

1 回答

  • 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>

    想象一下，上面是您的表和 pop-up 的代码(请忽略，没有特定于 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
}
    回复于

相关问题