Я поставил себе задачу войти в систему, получить информацию о существующих пользователях, а затем предоставить пользователю возможность их редактировать.
У меня есть Angular 7 реактивная форма, как это:
userdetails.page.ts
constructor(private formBuilder: FormBuilder,
private currentuser: UserService,
private router: Router ) {
}
ngOnInit() {
// first we need to make sure the current user data is up to date.
this.currentuser.getUserServer();
//
console.log('currentUser = ' + this.currentuser.data);
this.userDetailsForm = this.formBuilder.group({
id: [this.currentuser.data.Id],
email: [this.currentuser.data.Email], // [Validators.required, Validators.email]],
username: [this.currentuser.data.UserName],
dateofbirth: [this.currentuser.data.DateOfBirth],
title: [this.currentuser.data.Title],
firstname: [this.currentuser.data.FirstName],
middlename: [this.currentuser.data.MiddleName],
lastname: [this.currentuser.data.LastName],
displayname: [this.currentuser.data.DisplayName],
fullname: [this.currentuser.data.FullName],
detailscomplete: [this.currentuser.data.Id],
password: [this.currentuser.data.Password], // [Validators.required, Validators.minLength(6)]]
});
}
Я пытаюсь разделить вещи, поэтому есть служба пользователя и служба API. (Но я не уверен, что служба API строго необходима - или она должна быть просто частью вызова userservice?) Служба API (используемая функция):
api.service.ts
Get(endpoint: string) {
const fullurl = this.ServerUrl + endpoint;
return this.http.get(fullurl, {
headers: {'Content-Type': 'application/json'}
});
}
То, что я понимаю, возвращает наблюдаемое, и именно здесь я немного застреваю. Объект JSON с сервера также содержит некоторые ненужные объекты, а также те, которые мне нужны, поэтому я пытаюсь получить только те элементы, которые мне нужны. Средняя функция имеет это:
user.service.ts
public data: UserData;
getUserServer() {
this.api.Get(this.api.GetUserDetailsEndPoint).subscribe(res => {
console.log('Id from server = ' + res['Id']);
this.data = {
Id: res['Id'],
Email: res['Email'],
UserName: res['UserName'],
DateOfBirth: res['DateOfBirth'],
Title: res['title'],
FirstName: res['FirstName'],
MiddleName: res['MddleName'],
LastName: res['LastName'],
DisplayName: res['DisplayName'],
FullName: res['FullName'],
DetailsComplete: res['DetailsComplete'],
Password: res['Password']
};
console.log('This Data.Id = ' + this.data.Id)
});
}
Это работает до момента получения данных, и при регистрации Id отображается правильная информация, а остальные тоже там. (Последняя строка выше.) Однако я чувствую, что мне нужно превратить this.data
в наблюдаемое, чтобы вернуться к форме, где я, вероятно, должен подписаться на нее.
Я попытался определить это как
observable<UserData>
, а также observable<IUserData>
(который является интерфейсом, а не классом), но это нарушает назначение элементов. Я чувствую, что я довольно близок, но что-то упускаю из виду.
Это правильный подход? Как я могу получить возвращенные данные на самом деле в форму? Тогда я полагаю, что возвращение на сервер будет происходить аналогичным образом.