Question

我有一个父组件，控制着两个孩子。 FormChild是一个输入表单，它将教师添加到列表中并对其进行编辑，ListChild是使用FormChild输入/编辑的教师列表。期望的行为（我只是部分工作）是在ListChild中反映的FormChild中的更改。

FormChild有两种模式;编辑和添加。标志确定表单是否添加＆＃39;价值观或编辑＆＃39;值。当标志（编辑）为真时，＆＃39; editTeacher＆＃39;调用service方法，当它为false时，＆quot; addTeacher＆＃39;调用服务方法。

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();
}

请注意，在添加和编辑的情况下，对服务的调用几乎相同。这里应该发生的是，在完成时，observable将调用this.EmitChangeNotification，它将冒泡到父级，然后导致ListChild更新。

问题是，ListChild只在添加时更新，而不是在编辑时！使用f12跟踪代码，我看到了“添加”＃39; case，this.EmitChangeNotification被调用;但不是在编辑案例中。这只是web ui的一个问题;后端被调用，并且更改将在数据库中保持不变。

除了名为

的特定后端Web 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());
}

最初，＆＃39; editTeacher＆＃39;在服务中使用_http.put;我改为_http.post;但这没有任何帮助。我看了很多例子;好像这应该工作......我做错了什么？

提前致谢

编辑：另一条线索......似乎“完成了”＆＃39;在＆＃39;编辑＆＃39;中根本没有调用订阅的回调。案件。我替换了：

, ()=>this.emitChangeNotification()

与

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

并且日志在编辑时显示添加但不是的消息。

我无法看出它们有何不同......

Answer 1

回答我自己的问题......

事实上，网络ui并没有什么不同。

差异在于角度服务正在调用的web api调用。似乎必须要有完成回调的事情是必须从API返回一些东西。

在编辑的情况下，我什么也没有返回，只返回HTTP.OK，但是当我更改它以返回用户对象时，将触发回调，并更新列表。在我看来，写下某个地方会是一件好事，所以我在这里为后人提供它，希望它会为某人带来一些悲伤。

Angular 2：从表单组件兄弟中更新列表组件

1 个答案: