我终于能够通过本教程显示我所有的异步数据: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 / 客户端无法立即处理到达日期的问题吗?我真的很想保持我预先填充输入字段的当前方式,但是有了这个想法,我无法更改之前的日期,或者我只是不知道如何更改。