Question

这对某些人来说可能很容易，但我无法得到它。所以我有一个要显示的项目列表：

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

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

我的savedSearhes组件，用于填充ngFor中的数据：

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创建一个主题。

Answer 2

除非您再次执行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
        })
}

否则，除非您的savedSearches()实际返回了新刷新的列表，否则您可以在订阅中执行此操作：

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

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

2 个答案: