두 자녀를 제어하는 부모 구성 요소가 있습니다. FormChild는 교사를 목록에 추가하고 편집하는 입력 양식입니다. ListChild는 FormChild를 사용하여 입력/편집 된 교사 목록입니다. 원하는 동작 (부분적으로 만 작동했습니다)은 FormChild에서 ListChild에 반영된 변경 사항을 적용하는 것입니다.각도 2 : 양식 구성 요소 형제의 목록 구성 요소 업데이트
FormChild에는 두 가지 모드가 있습니다. 편집하고 추가하십시오. 플래그는 양식에 '추가'값 또는 '편집'값이 있는지 여부를 결정합니다. 플래그 (편집)가 true이면 'editTeacher'서비스 메소드가 호출되고, false이면 '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();
}
추가 및 편집의 경우 서비스 호출은 거의 동일합니다. 여기서 일어날 일은 완료시 observable이 this.EmitChangeNotification을 호출하여 부모에게 거품을 일으키고 ListChild가 업데이트되도록하는 것입니다.
문제는 ListChild가 추가시에만 업데이트되며 편집시에 업데이트되지 않는다는 것입니다. f12로 코드를 추적하면, 나는 'add'의 경우 this.EmitChangeNotification이 호출된다. 그러나 편집 경우에는 아닙니다. 이것은 웹 UI에만 문제가됩니다. 백 엔드가 호출되고 변경 사항이 데이터베이스에 그대로 유지됩니다. 서비스의 'editTeacher가'_http.put 사용하던 원래
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());
}
;
서비스의 서비스 요청
라는 특정 백엔드 웹 API 방법을 제외하고 동일 나는 이것을 _http.post로 변경했다; 그러나 이것은 도움이되지 못했습니다. 나는 "예의 수에서 봤는데,이 그냥 작동해야처럼 ... 어떻게 내가 잘못하고 있어요 보인다 사전에감사
편집 : 또 다른 단서 ... 그것은 것으로 보인다 ' 전체에 편집 '경우'는 구독의 콜백 모두에서 호출되지 않는 '나는 대체 :.
,()=>this.emitChangeNotification()
,()=>console.log('tell someone')
과
로 로그에 을 추가 할 때 메시지가 표시되지만 편집 할 때는이 아닙니다. 나는 그들이 다른 볼 수 없습니다... 내 자신의 질문에 대답가는
'emitChangeNotification'이 (가) 편집되지 않았다는 것을 어떻게 알게 되었습니까? 어떤 오류가 있습니까? – ranakrunal9
크롬에서 f12 코드를 한 번 밟아 보면 알 수 있습니다. changeNotifier.Emit()을 구독에 대한 세 번째 인수로 직접 두는 대신 별도의 함수 emitChangeNotification()을 작성했습니다. 그 함수에서 중단 점을 설정하면 추가 할 때 중단되지만 편집 할 때는 중단되지 않습니다. – user2785918