Угловое отображение даты с асинхронными данными через datePipe - PullRequest
Новая
       43

Угловое отображение даты с асинхронными данными через datePipe

0 голосов
/ 29 июня 2019

Я наконец-то смог отобразить все свои асинхронные данные с помощью этого урока: 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;
}

Forked StackBlitz оригинальной идеи, как она работает с обычной датой : https://stackblitz.com/edit/angular-2wcq3q?file=src/app/app.component.html

Также проблематичным будет то, что я хочу изменить тип ввода dateFormat через выбранный язык с помощью плагина i18n.

В моем компоненте регистрации я получил это через: 

  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 / клиент не может обработать даты прибытия мгновенно? Я действительно хочу сохранить текущий способ, которым я предварительно заполняю поля ввода, но с этой идеей я не могу изменить даты раньше, или я просто не знаю как.

...