Возвращение данных в реактивную форму в Angular 7 - PullRequest
Новая
       17

Возвращение данных в реактивную форму в Angular 7

2 голосов
/ 06 апреля 2019

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

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

1 Ответ

2 голосов
/ 06 апреля 2019

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

Я предлагаю сначала создать пустую форму, убедитесь, что свойства точно соответствуют свойствам ваших данных.Ваш подход правильный.В вашем user.service.ts переключите код на 

getUserServer(): Observable<UserData> {
  return this.http.get<UserData>(`pathToEndpoint`);
}

В вашем userdetails.page.ts 

constructor(private userService: UserService, ...) {}

ngOnInit() {
  this.userForm = this.formBuilder.group({
    Id: [],
    ...
  });

  this.userService.getUserServer().subscribe(user => this.userForm.patchValue(user.data));
}

patchValue функция, предоставляемая формой, исправляет все совпадения ключей между вашими данными и формой.Он игнорирует свойства, которые недоступны в форме, и наоборот.Вам следует подумать о переименовании всех свойств в lowerCamelCase.

Подсказка при работе с RxJS: почти везде вы будете читать, что вам нужно отписаться от наблюдаемых, если вы подписались на них.Но это только половина правды.Если вы уверены, что заметка собирается завершиться, то вам не нужно отписываться.HttpClient .get предназначен для завершения после выдачи первого значения или для выдачи ошибки.Поэтому вам не нужно отписываться от него.Но обратите внимание, когда вы используете подписку.Вы поймете более четко, если вы прочитаете о таких операторах, как take .

...