angular - RxJS：TypeError：您在预期流的位置提供了无效对象。您可以提供 Observable、Promise、Array 或 Iterable

Question

我正在尝试使用 RxJS 从本地数组变量创建实时搜索（所以不是通过网络，我已经在获取数据并在启动时存储它），这是我正在搜索的数组的样子

[
        {
            "userId": 6130,
            "friendId": 426,
            "firstName": "hardik",
            "lastName": "sa123",
            "userName": "hardiksa123",
            "image": "somelink",
            "thumbs": [
                {
                    "path": "somelink",
                    "size": "original"
                },
                {
                    "path": "somelink",
                    "size": "thumb_300x300"
                }
            ],
            "isBlocked": 0
        },
        {
            "userId": 6130,
            "friendId": 78294,
            "firstName": "mayank",
            "lastName": "vyas",
            "userName": "mayank123",
            "image": "",
            "thumbs": [],
            "isBlocked": 0
        },
        {
            "userId": 6130,
            "friendId": 941,
            "firstName": "Sagar",
            "lastName": "Sa",
            "userName": "sagar",
            "image": "",
            "thumbs": [],
            "isBlocked": 0
        }
    ]

这是组件代码

    const friendsFiltered = (friendList) => this.searchedFriends = friendList;

    const getFullName = (friend) =>
      `${friend.firstName} ${friend.lastName}`;

    const isFriendMatching = (friend, searchText) =>
      getFullName(friend).startsWith(searchText.toLowerCase());

    const getMatchingFriends = (searchText) =>
      of(this.allFriends.filter(friend => isFriendMatching(friend, searchText)));

    console.log(getMatchingFriends);

    this.nameSearch$ = this.search.valueChanges.pipe(
      debounceTime(500),
      map(searchText => searchText.trim()),
      distinctUntilChanged(),
      filter(searchText => searchText.length),
      tap(c => console.log('search', c)),
      switchMap(getMatchingFriends)
    );

    this.nameSearch$.subscribe(friendsFiltered);

如果我switchMap从管道中删除它工作正常并且错误落在getMatchingFriends方法本身

注意：有一个题目完全一样的题目，但里面的内容完全不同，请注意。

编辑 这是更新后整个代码的样子

  searchForn: FormGroup;
  allFriends;
  nameSearch$: Observable<any>;
  searchedFriends: any[] = [];
  constructor(
    private friendService: FriendService,
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    this.initialiseForm();
    this.nameSearch$ = this.search.valueChanges.pipe(
      debounceTime(500),
      map(searchText => searchText.trim()),
      distinctUntilChanged(),
      filter(searchText => searchText.length),
      tap(c => console.log('search', c)),
      switchMap(this.getMatchingFriends)
    );

    this.nameSearch$.subscribe(this.friendsFiltered);
  }

  initialiseForm() {
    this.searchForn = this.fb.group({
      searchName: [],
    });
  }

  get search() { return this.searchForn.get('searchName'); }

  friendsFiltered = (friendList) => {
    this.searchedFriends = friendList;
    console.log('sf', this.searchedFriends);
  }

  getFullName = (friend) => `${friend.firstName.toLowerCase()} ${friend.lastName.toLowerCase()}`;

  isFriendMatching = (friend, searchText) =>
    this.getFullName(friend).includes(searchText.toLowerCase());

  getMatchingFriends = (searchText) =>
    of(this.allFriends.filter(friend => this.isFriendMatching(friend, searchText)));

  getAllFriends() {
    this.friendService.getFriends().then((friends: any) => {
      this.allFriends = friends.friends;
    }).catch((err) => {
      // Handle error
    });
  }

标签： angularrxjsangular8