angular - 通过 datePipe 显示带有异步数据的日期

Question

我终于能够通过本教程显示我所有的异步数据：https ://coryrylan.com/blog/using-angular-forms-with-async-data

唯一存在的问题是我从我的 Postgres 数据库中收集所有数据，并且在这样的请求之后保存或到达日期：dateOfBirth: "1997-12-24 00:00:00.0"

我应该说我想用它来预填充输入字段以更新用户配置文件。

我知道 Angular 不能像这样处理它，我需要一个 datePipe 或其他东西，但是当我使用它来访问我的数据时，我真的不知道如何使用它：

export class ProfileComponent implements OnInit {
  ngOnInit() {

      this.buildForm();

      this.user = this.userService.getProfile().pipe(
        tap(user => this.editForm.patchValue(user))
      );
  }

  public buildForm() {
    this.editForm = this.form.group({
      username: ['', [Validators.required, Validators.minLength(this.minLength), CustomValidators.validateCharacters], AlreadyTakenValidator.checkUsername(this.registrationService)],
      email: ['', [Validators.required, Validators.email, CustomValidators.validateCharacters], AlreadyTakenValidator.checkEmail(this.registrationService)],
      oldPassword: ['', [Validators.required], CustomValidators.checkPassword(this.registrationService)],
      newPassword: ['', [Validators.required, CustomValidators.passwordStrength]],
      newPasswordConf: ['', [Validators.required]],
      firstname: ['', [Validators.required, NoWhitespaceValidator()]],
      lastname: ['', [Validators.required, NoWhitespaceValidator()]],
      country: ['', [Validators.required]],
      dateOfBirth: ['', [Validators.required]],
      gender: ['', [Validators.required]],
    }
      , {
        validator: MustMatch('newPassword', 'newPasswordConf')
      })
  }
}

export class User {
    userId: number;
    username: string;
    email: string;
    password: string;
    firstname: string;
    lastname: string;
    token?: string;
    dateOfBirth: Date;
    gender: string;
    country = [] as Array<string>;
    profileImage;
    lastUpdated: Date;
    activated: boolean;
}

原始想法的分叉 StackBlitz 如何在正常日期下工作：https ://stackblitz.com/edit/angular-2wcq3q?file=src/app/app.component.html

还有一个问题是我想使用 i18n-plugin 通过所选语言更改输入类型 dateFormat。

在我的注册组件中，我完成了这个工作：

  constructor(
    private translateService: TranslateService,
    private _adapter: DateAdapter<any>
  ) { }

  ngAfterContentChecked() {

    this._adapter.setLocale(this.translateService.currentLang);

但是来自服务器的异步请求数据不起作用。因为什么都没有显示出来。

编辑：所以也许让我解释一下：出现问题是因为服务器（在我的情况下为数据库）将一些无法立即使用的内容返回给客户端。在 Postgres 中，它被保存为没有时区的时间戳，例如：2019-06-13 10:26:09.322

在我的服务器中，我保存客户端的到达日期，如下所示：

     DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.ENGLISH);
     LocalDateTime lu = LocalDateTime.parse(lastUpdated, inputFormatter);
     LocalDateTime dob = LocalDateTime.parse(dateOfBirth, inputFormatter);

     this.dateOfBirth = Date.from(dob.atZone(ZoneOffset.UTC).toInstant()); // both are type Date
     this.lastUpdated = Date.from(lu.atZone(ZoneOffset.UTC).toInstant());

我在 StackOverflow 上浏览了许多线程，只是读到时区非常烦人，您应该将日期保存到数据库中作为 UTC。但是，如果我将它们保存为带时区的时间戳呢？这会解决 Angular / 客户端无法立即处理到达日期的问题吗？我真的很想保持我预先填充输入字段的当前方式，但是有了这个想法，我无法更改之前的日期，或者我只是不知道如何更改。

标签： angulartypescriptdateangular-date-format