Question

getAllSchools()返回来自后端的学校列表。加载应用程序时，我发出一个get请求，并将学校列表加载到一个名为“学校”的数组中。

addSchool()添加了一所新学校

每次完成addSchool()时，我想刷新学校数组以包括新学校。我该怎么做？

school-service.ts

  getAllSchools(): Observable<ISchool[]> {
    return this.http.get<ISchool[]>(this.url);
  }


  addSchool(school: ISchool): Observable<ISchool> {
    this.schoolsSubject$.next();
    return this.http.post<ISchool>(this.url, school, {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    });
  }

app-component.ts

  ngOnInit(): void {
    this.getSchools();
  }


  getSchools(): void {
    this.schoolService.getAllSchools().subscribe({
      next: schools => {
        this.schools = schools;
        this.filteredSchools = schools;
      },
      error: err => this.errorMessage = err
    });
  }

add-scshool-component.ts

  onSubmit(form: NgForm) {
    this.schoolService.addSchool(this.model)
      .subscribe(
        (data: ISchool) => console.log(data),
        (err: any) => console.log(err)
      ); 
  }

Answer 1

您可以使用BehaviorSubject保留数据，并使用tap再次调用

export class YourService {
  private _schools: BehaviorSubject<ISchool[]>;

  constructor(
    private http: HttpClient,
  ) {
    this._schools = new BehaviorSubject([]);
  }

  getAllSchools(): Observable<ISchool[]> {
    this._getAllSchools();

    return this._schools.asObservable();
  }

  addSchool(school: ISchool): Observable<ISchool> {
    return this.http.post<ISchool>(this.url, school, {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }).pipe(
      // after successfully adding a school you call once again get all schools
      tap(() => this._getAllSchools()),
    );
  }

  private _getAllSchools(): void {
    this.http.get<ISchool[]>(this.url).subscribe(
      schools => this._schools.next(schools),
    );
  }
}

Answer 2

在add-school-component.ts

  @Output() newSchool: EventEmitter<any> = new EventEmitter();

  onSubmit(form: NgForm) {
    this.newSchool.emit(this.model);
  }

在app-component.html

中

<app-add-school (newSchool)='addNewSchool($event)></app-add-school>

在app-conponent.ts中

  addNewSchool(newSchool) {
    this.schoolService.addSchool(newSchool)
       .subscribe(
         (data: ISchool) => console.log(data),
         (err: any) => console.log(err)
       );

       this.getSchools();
  }

Angular：发出发布请求后，如何触发获取请求并使用修改后的值更新组件？

2 个答案: