要素がすべてアウレリアクラスのすべての配列から削除されています

Question

メンバーのための簡単なフィルタ検索機能を記述しています。まだ私はちょうど設定された任意のフィルタリングがなかったので

getMembers() { 
    return this.userService.getMembers(this.authUser.selectedCompany).then(data => { 
     if (data.statusCode === 200) { 
      this.members = data.content.users.sort(function (a, b) { 
       if (a.firstName < b.firstName) return -1; 
       if (a.firstName > b.firstName) return 1; 
       return 0; 
      }); 

      this.filteredMembers = this.members; 
     } 
    }).catch(err => { 
     console.log('error getting members:', err.response); 
    }); 
} 

：私は1つが他のすべてのメンバーのリストは、メンバーのフィルタリングされたリストになりますどのfilteredMembersであるmembersある2つのアレイのプロパティを持っていますfilteredMembersをmembersと等しくする。ここまでは順調ですね。今

私はメンバーが私が検索ボックスに入力する内容に応じて、フィルタkeyUpイベントで入力された検索することができます：

<input type="search" value.bind="searchQuery" keyup.delegate="filterMembers()"> 

と機能は：

filterMembers() { 
    if(!this.searchQuery) { 
     this.filteredMembers = this.members; 
     return; 
    } 
    let filteredCount = this.filteredMembers.length; 
    for (var i = 0; i < filteredCount; i++) { 
     if (this.filteredMembers[i].lastName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) == -1) { 
      this.filteredMembers.splice(i, 1); 
     } 
    } 
} 

だから、あなたが見ることができます関数内で検索ボックスのユーザータイプがメンバーの姓の中に見つからない場合は、filteredMembers配列からメンバーを削除します。検索クエリが空の場合、私はfilteredMembersをmembersと同じにします。ここで

は私が Aureliaにかかわる問題であるかもしれないいくつかの理由のために実行しているか、人為的なミスかもしれませんが、私は filteredMembersから要素を削除すると、それはまた members配列から削除されている問題です。私はを membersに等しく設定しないように、最初の getMembers()の機能のすべての種類を試しました。

Answer 1

問題の原因を突き止めることができませんでしたが、問題を回避するためにfilterMembers関数を更新しました。

filterMembers() { 
    let members: User[] = []; 
    if(!this.searchQuery) { 
     this.filteredMembers = this.members; 
     return; 
    } 
    let membersCount = this.members.length; 
    for (var i = 0; i < membersCount; i++) { 
     if (this.members[i].lastName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1) { 
      members.push(this.members[i]); 
     } 
    } 
    this.filteredMembers = members; 
} 

Answer 2

逆の方法を試してください。一致しない要素を削除する代わりに、新しい空の配列を作成し、一致する要素を追加してください。その後、filteredMembersをその新しい配列に設定します。 またはfilteredMembersとmembersが同じ配列インスタンスである場合は要素の除去が反映され、（結果と新しい配列を返す）ネイティブフィルタ方法を使用しfilteredMembersを書き込む= members.filter（...） https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 3

どちらのプロパティも同じ配列インスタンスへの参照であるため

シャロークローンmembersアレイを割り当ててからfilteredMembersに割り当てます。これに

if(!this.searchQuery) { 
    this.filteredMembers = this.members; 
    return; 
} 

：

if(!this.searchQuery) { 
    this.filteredMembers = this.members.slice(0); 
    return; 
}