0

我正在尝试获取我在 Angular 应用程序中使用的日期管道，以便在输入中的模板中使用它时正确解析。最初，在格式化日期之前，代码如下所示：

<input class="app-input" [readonly]="!hasAdminAccess"                                  
    [(ngModel)]="staff.profile.hireDate" placeholder="None"
    [field-status]="getPropertyStatus('profile.hireDate')"/>

我用日期管道得到的最接近的是：

<input class="app-input"
{{ staff.profile.hireDate | date:'shortDate' }} placeholder="None"
[field-status]="getPropertyStatus('profile.hireDate')"/>

但是打印到视图上的是这个（字面意思是这个）：

> <input class="app-input" 3/18/2014 placeholder="None"
> [field-status]="getPropertyStatus('profile.hireDate')"/>

现在，您会注意到格式正确的日期在那里（并且日期转换成功发生，使其成为：

3/18/2014

但是，我不想要其余的（显然）。我怎样才能在这里修改语法以便只得到要打印的日期？我已经盯着它并尝试了一些调整，但到目前为止还不能让它工作。

4

1 回答 1

0

您可以使用 typescript 和ngModelChangedproperty 中的 get 和 set 函数来修改设置ngModel后的内容。

组件模板：

<input class="app-input" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)"/>

组件类：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="setDate()">Set Date</button>
      <input class="app-input" readonly="true" [(ngModel)]="hireDate" (ngModelChange)="dateChanged($event)" placeholder="None"/>
    </div> 
  `,
})
export class App {
  name:string;
  staff: any;
  myDate: any;
  private _hireDate;

  dateChanged(value) {
    this.hireDate = this.datePipe.transform(value, 'shortDate');
  }

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
  }

  get hireDate() {
    return this._hireDate;
  }

  setDate() {
    this.hireDate = '10-03-1993';
  }

  constructor(private datePipe: DatePipe) {
  }
}

每当输入更改时，都会设置输入的值，因此可能会导致用户体验问题，因为用户将无法输入他喜欢的日期。一种解决方法是在用户输入日期时调用日期更改函数。（例如，通过按钮单击）。

我相信 set 和 get 函数仅适用于类变量，在您的情况下，您有一个对象属性。如下所示修改 set 函数将起作用。

  set hireDate(value) {
    this._hireDate = this.datePipe.transform(value, 'shortDate');
    this.staff.profile.hireDate = this._hireDate;
  }

我还在这里添加了一个 plunkr 。

于 2017-11-11T02:03:17.360 回答