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

这对某人来说可能很容易，但我就是搞不懂。因此，我有一个要显示的项目列表：

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

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

要显示数据的html：

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

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

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

createSavedSearch（搜索：SavedSearch）：可观察{
返回此.http.post（'/api/searches/'，search）
}

当我添加一个新项目时，该项目实际上会被添加到服务器。但我没有看到“savedSearches”组件显示添加的项，只有在重新加载页面时，我才能看到添加的新项。

---

如何将新项目添加到服务器，并在其他组件中看到它与新项目一起添加，而无需重新加载页面

除非再次执行

getConfig（）

，否则将无法看到它。使用

.switchMap（）

链接http调用

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

否则，除非您的

savedsearchs（）

实际返回了一个新刷新的列表，否则您可以在订阅中执行此操作：

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

---

最好的方法是在服务中移动方法getConfig（）和saveSearch（），只为UserSavedSearchs创建一个主题，并创建一个可观察对象来观察它们。

您是否在ngOnInit内部调用getConfig？是的，它在ngOnInit内部感谢您的回答，问题是saveSearch（）函数在其他组件中，所以我无法从订阅库中更新ngfor以获取帮助，这就是我所需要的！我脑子里想的都是，但就是想不完。谢谢

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

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

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.