Angular 2: обновить компонент списка из родственного компонента формы

У меня есть родительский компонент, управляющий двумя дочерними элементами. FormChild — это форма ввода, которая добавляет учителей в список и редактирует их, ListChild — это список учителей, которые были введены/отредактированы с помощью FormChild. Желаемое поведение (которое я получил только частично) состоит в том, чтобы изменения в FormChild отражались в ListChild.

FormChild имеет два режима; редактировать и добавлять. Флаг определяет, имеет ли форма значения «добавить» или «редактировать». При значении флага (редактирование) вызывается сервисный метод editTeacher, при ложном — вызывается сервисный метод addTeacher.

public emitChangeNotification() {
  this.changeNotifier.emit();
}

teacherAddEdit(event) {

  if (!this.editing) {
    this._userService.addTeacher(this.userItem)
      .subscribe(
        nextItem=> this.nextItemMsg = nextItem
        , error => this.errorMsg = <any> error
        , ()=>this.emitChangeNotification()
      );
  }
  else {
    this._userService.editTeacher(this.userItem)
      .subscribe(
        nextItem=> this.nextItemMsg = nextItem
        , error => this.errorMsg = <any> error
        , ()=>this.emitChangeNotification()
      );
  }
  this.initForm();
}  

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

Проблема в том, что ListChild обновляется только при добавлении, а не при редактировании! Просматривая код с помощью f12, я вижу, что в случае «добавить» вызывается this.EmitChangeNotification; но не в случае редактирования. Это проблема только с веб-интерфейсом; вызывается серверная часть, и изменения сохраняются в базе данных просто отлично.

Вызовы службы в службе идентичны, за исключением определенного внутреннего метода веб-API, называемого:

addTeacher(userToCreate:CreateUser)
{
  let Url = this.BASEURL + '/accounts/create';
  let headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  });
  let options = new RequestOptions({ headers: headers });
  let body = JSON.stringify(userToCreate);
  return this._http.post(this._createUserUrl, body, options).map((res: Response) => res.json());
}

editTeacher(userToChange:CreateUser)
{
  let Url = this.BASEURL + '/updateTeacher/' + userToChange.UserId;
  let headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  });
  let options = new RequestOptions({ headers: headers });
  let body = JSON.stringify(userToChange);
  return this._http.post(Url, body, options).map((res: Response) => res.json());
}

Первоначально «editTeacher» в службе использовал _http.put; я изменил это на _http.post; но это не помогло. Я просмотрел несколько примеров; кажется, это должно работать... что я делаю неправильно?

заранее спасибо

Редактировать: еще одна подсказка... кажется, что обратный вызов подписки "при завершении" вообще не вызывается в случае "редактирования". Я заменил:

, ()=>this.emitChangeNotification()

с

, ()=>console.log('tell someone')

и журнал отображает сообщение при добавлении но не при редактировании.

Я не вижу, чем они отличаются...


person user2785918    schedule 18.11.2016    source источник
comment
как вы узнали, что при редактировании emitChangeNotification не вызывается? вы получаете какую-либо ошибку?   -  person ranakrunal9    schedule 18.11.2016
comment
Я вижу это, выполняя один шаг по коду с помощью f12 в хроме. Вместо того, чтобы помещать changeNotifier.Emit() непосредственно в качестве третьего аргумента подписки, я написал отдельную функцию emitChangeNotification(). Я установил точку останова на эту функцию, и она прерывается при добавлении, но не при редактировании.   -  person user2785918    schedule 18.11.2016


Ответы (1)


Отвечу на свой вопрос....

На самом деле веб-интерфейс ничем не отличался.

разница заключалась в вызовах веб-API, которые вызывала служба angular. Кажется, что для того, чтобы вызов завершения снова сработал, должно произойти то, что что-то должно быть возвращено из API.

В случае редактирования я ничего не возвращал, только HTTP.OK, но когда я изменил это, чтобы вернуть пользовательский объект, сработал обратный вызов, и список обновился. Мне кажется, это было бы неплохо записать куда-нибудь, поэтому я предлагаю это здесь для потомков в надежде, что это избавит кого-то от горя.

person user2785918    schedule 21.11.2016