Как открыть DatePicker и установить дату в каждой строке отдельно при нажатии кнопки редактирования

Question

У меня есть таблица, где в каждой строке у меня есть dateTimePicker в каждой строке.И у меня есть кнопка редактирования в каждой строке. Я хочу, чтобы "На кнопке редактирования нажмите dateTimePicker должен открыться для этой линии perticular". Я использую 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 этот datetimepicker.

Это мой код файла ts.

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

          "name": "name2"
        },
        {

          "name": "name3"
        }


  editAction(){
          //on edit button click
          }

Answer 1

Похоже, вы используете старую версию Angular, потому что я не верю, что ваш синтаксис *ngFor="let data of data | let i = index" действителен для Angular v7 (текущая версия).Если вы используете старую версию Angular, то вы также можете использовать старую версию ng-pick-datetime, и в этом случае кто знает, насколько действительна текущая документация.Но текущая документация для ng-pick-datetime (которая предназначена для использования с Angular v7) описывает, как выполнить ваш точный запрос .

Похоже, вы должны двигатьсядиректива [owlDateTimeTrigger]="dt" для элемента, который вы хотите запустить средство выбора даты и времени.В вашем случае кнопка редактирования.

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

<td class="editButton" [owlDateTimeTrigger]="dt">
  <mat-icon style="vertical-align: middle">edit</mat-icon> Edit 
</td>