Question

我有一张桌子，在每一行中，我每一行都有dateTimePicker。而且我在每一行中都有一个编辑按钮。我想像“在编辑按钮上单击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
          }

Answer 1

您似乎正在使用Angular的旧版本，因为我不相信您的*ngFor="let data of data | let i = index" syntax is valid for Angular v7（当前版本）。如果您使用的是Angular的旧版本，则也可能使用的是ng-pick-datetime的旧版本，在这种情况下，谁知道当前文档的有效性。但是ng-pick-datetime的最新文档（打算与Angular v7一起使用）outlines how to do your exact request。

看起来您应该将[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>

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

1 个答案: