요소가 아우렐 리아 클래스의 모든 배열에서 제거됩니다.

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); 
    }); 
} 

: 나는 하나가 다른 모든 구성원의 목록 회원의 필터링 된 목록이 될 것이다 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를 새 배열로 설정하십시오. OR (결과와 새로운 배열을 반환) 고유 필터 방법을 사용 filteredMembers 물품 = members.filter (...) https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 3

filteredMembers 경우 members가 동일한 어레이 인스턴스이며, 소자 분리를 반영 할 것이다 두 속성 모두 동일한 배열 인스턴스에 대한 참조이므로

filteredMembers에 할당하기 전에 섀도 복사본 members 배열을 할당하십시오.

변경이 : 여기에

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

:

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