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

Question

This is probably easy for someone, but I just can't get it. So I have a list of items to display:

My service that fetches the data, configService.ts

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

My savedSearhes component that populates data in the ngFor:

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

the html to display data:

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

The main issue I have, is I have another component that I use to add a new item to the same server.

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

The service that posting new item to server:

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

When I add a new item, the item actually gets added to the server. But I don't see the "savedSearches" component display added item, only when I reload the page I can see new item added. How to add new item to the server and see its being added with new item in other component without reloading the page.

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.

The best way is to move methods getConfig() and saveSearch() in a service and just create a subject for userSavedSearches and an Observable to watch the same.

Answer 2

You won't see it unless you do a getConfig() again. Use a .switchMap() to chain your http calls.

saveSearch() {
    this.saveSearchObject = {
        name: this.SearchName,
        description: this.SearchDescription,
        context: this.theContext,
    }
    this.searchService.createSavedSearch(this.saveSearchObject)
        .switchMap(data => {
            console.log(data) // newly added item to server
            return this.configService.getConfig();
        })
        .subscribe(data => {
            this.userSavedSearches = data.isr.me.savedSearches //get an array of items
        })
}

Otherwise, unless your savedSearches() actually returned a newly refreshed list, you can do it in your subscribe:

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