我同意你的看法。调用getItemList((时，itemList变量为空。确保在getItem((中放入调试器和checkitemList：
我在服务中有一个项目列表，以及一个getter，它将该列表封装在一个可观察对象中
可观察对象在具有async管道的组件视图中消耗，并按预期工作。当列表更新时，视图也会更新。
我还有一个不同的组件，它需要根据id从该列表中获取特定项目的可观察结果。
问题是，当请求时，具有该id的项目可能还不在列表中。我该如何实现这一目标？
我尝试过的一些例子：
export class ItemsService {
private itemList: Item[] = [];
constructor() {
// get the list from the backend
}
// This is fine
getItemList(): Observable<Item[]> {
return of(this.itemList);
}
// This I assume does not work, because the pipe just applies map
//on whatever is now in the observable list
getItem(id: string): Observable<Item> {
return this.getItemList().pipe(map(items => items.find(item => item.id === id)));
}
// This I assume does not work as the local item is not yet set when I wrap it in an observable
//to return it, and when it eventually gets set by the callback, it's already out of scope.
// The weird thing to me is that the callback is only called at the beginning, when the list is empty,
//and not anymore when the list gets populated
getItem(id: string): Observable<Item> {
let item: Item;
this.getItemList().subscribe(items => {
console.log('callback called');
item = items.find(item => item.id === id);
});
return of(item);
}
}
当给定元素可用时，获得通知的一种可能方法是使用Subject。
将此添加到您的服务中：
private subject = new Subject<Item>();
一旦你收到你的数据，循环浏览并将其提供给主题。
this.itemList.forEach((item: Item) => {
this.subject.next(item);
});
第三部分是获取通知。
getItem(id: string): Observable<Item> {
return this.subject
.pipe(
filter((item: Item) => item.id === id)
)
}
从你的组件中使用它，比如：
ngOnInit() {
const waitForElementWithId = 'b1';
this.itemsService.getItem(waitForElementWithId).subscribe(x => {
console.log(`${waitForElementWithId} is here`);
});
}
正在进行Stacklitz。
试试这个：
getItem(id: string): Observable<Item> {
return this.getItemList().pipe(
map(items => items.find(item => item.id === id)),
);
}
getItem(id: string): Observable<Item> {
let item: Item;
console.log(this.itemList);
debugger;
// see whether itemList is empty or not;
// if it's empty, the below function - getItemList() - return an observable with empty value.
this.getItemList().subscribe(items => {
console.log('callback called');
item = items.find(item => item.id === id);
});
return of(item);
}
关键是，包含｛return of(itemList(｝的getItemList不会关注itemList的新值。
相反，您可以使用主题，并在从服务器获取数据完成后使用next(数据(然后订阅该主题。