javascript - Angular 2在其他组件中显示新添加的项目到http

Question

这对某些人来说可能很容易，但我就是做不到。所以我有一个要显示的项目列表:

我的获取数据的服务，configService.ts

ngOnInit() {
  getConfig(): Observable<any> {
    return this.http.get<any>('/api/config').map(res => res);
  }
}

我在 ngFor 中填充数据的 savedSearhes 组件:

this.configService.getConfig().subscribe(data => {
    this.userSavedSearches = data.isr.me.savedSearches //get an array of items
});

显示数据的html:

<div *ngFor="let savedsearch of userSavedSearches">
    {{savedsearch.name }}
</div>

我遇到的主要问题是，我有另一个组件可用于将新项目添加到同一服务器。

saveSearch() {
    this.saveSearchObject = {
        name: this.SearchName,
        description: this.SearchDescription,
        context: this.theContext,
    }
    this.searchService.createSavedSearch(this.saveSearchObject).subscribe(data => {
        console.log(data) // newly added item to server
    })
}

将新项目发布到服务器的服务:

createSavedSearch(search: SavedSearch): Observable<SavedSearch> {
    return this.http.post<SavedSearch>('/api/searches/', search)
}

当我添加一个新项目时，该项目实际上被添加到服务器。但是我没有看到“savedSearches”组件显示添加的项目，只有当我重新加载页面时我才能看到添加的新项目。 如何将新项目添加到服务器并在不重新加载页面的情况下查看它与其他组件中的新项目一起添加。

Answer 1

You can achieve it by Creating a subject where saveSearch function lies

let subjectUserSavedSearches = new Subject();
let obsrvUserSavedSearches = subjectUserSavedSearches.AsObservable();

 saveSearch() {
    this.saveSearchObject = {
        name: this.SearchName,
        description: this.SearchDescription,
        context: this.theContext,
    }
    this.searchService.createSavedSearch(this.saveSearchObject).subscribe(data => {
        this.userSavedSearches = data;
    this.subjectUserSavedSearches.next(this.userSavedSearches);
    })
}

Now watch that obsrvUserSavedSearches on the component you need to show data.

最好的方法是将方法 getConfig() 和 saveSearch() 移到服务中，并只为 userSavedSearches 创建一个主题，并创建一个观察相同主题的 Observable。