如何打开datePicker并在单击“编辑”按钮时分别设置每行的日期

我有一张桌子,每一行都有一个日期时间选择器。我在每一行都有一个编辑按钮,比如“在编辑按钮上单击dateTimePicker应该为那一行打开”,我使用的是angular2或者更多。 下面是我的html代码。

<table class="table">
      <thead>
        <tr>

          <th (click)="sort('name')">Name
            <span class="glyphicon sort-icon" *ngIf="key =='name'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>

          <th (click)="sort('genre')">Start Date &amp; Time
            <span class="glyphicon sort-icon" *ngIf="key =='genre'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of data | let i = index">
          <td>{{data.name}}</td>

          <td><input placeholder="Date Time:"
            [(ngModel)]="dateTime"
            [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
     <owl-date-time #dt></owl-date-time>
          </td>

          <td class="editButton" (click)='editAction()'>
              <mat-icon style="vertical-align: middle">edit</mat-icon> Edit 
          </td>


        </tr>
      </tbody>

    </table>

https://www.npmjs.com/package/ng-pick-datetime 这个日期时间选择器。

这是我的ts文件代码。

data = [
        { 
          "name": "name1"
        },
        { 

          "name": "name2"
        },
        {

          "name": "name3"
        }


  editAction(){
          //on edit button click
          }