订阅者在重新分配 Observable 数组时未更新，但在将对象推送到数组时收到通知

Question

I have made an Observable out of an array and i have subscribed to it. whenever I push items to an array, the list is updated in View, but when I do a filter function on that array it is not updated?

The array is a property of a class, it is reassigned on doing array.filter()

  addUser(user) {
    const newUsers = JSON.parse(window.localStorage.getItem('users'));
    this.users.push(user);
    newUsers.push(user);
    window.localStorage.setItem('users', JSON.stringify(newUsers));
  }

  subscribeUsers(): Observable<any> {
    this.users = JSON.parse(window.localStorage.getItem('users'));
    return of(this.users);
  }

  searchUser(key) {
    let name;
    if (key === '') {
     this.users = JSON.parse(window.localStorage.getItem('users'));
     return;
    } else {
    this.users = this.users.filter(item => {
      name = `${item.name.first} ${item.name.last}`;
      if (name.includes(key)) {
        return true;
      } else {
        return false;
      }
     });
   }
   console.log(this.users);
  }

when addUser() is called, the subscriber is updated, list update in view, but when searchUser() is called, the subscriber is not updated, the list stays same. the search is working fine.

Answer 1

The issue is from your subscribeUsers method:

 subscribeUsers(): Observable<any> {
    this.users = JSON.parse(window.localStorage.getItem('users'));
    return of(this.users);
  }

The subscriber always get the data from local storage before it emits the observable. So for your filter to work, you'll have to store the results of the filter to local storage. Which doesn't make much sense.

Your subscriber should just return of(this.users) since you are mutating that array already.

 subscribeUsers(): Observable<any> {
    // remove this line
    // this.users = JSON.parse(window.localStorage.getItem('users'));
    return of(this.users);
  }

EDIT:

Stackblitz demo