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插件通过所选语言更改输入类型dateFormat。

在我的注册组件中，我已通过以下方法完成此工作：

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

  ngAfterContentChecked() {

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

，但从服务器请求的异步数据不起作用。因为什么都没显示。

修改：因此，也许让我解释一下：问题出现是因为服务器（在我的情况下是postgres）中的数据库将无法立即使用的东西返回给客户端。在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 /客户无法立即处理到达日期的问题吗？我真的很想保留当前填充输入字段的当前方式，但是有了这个主意，我无法更改之前的日期，或者我只是不知道如何。

通过datePipe角度显示带有异步数据的日期

0 个答案: