입력 내용과 일치하는 목록의 항목 필터링

Question

요소의 innerHTML을 가져 오는 데 문제가 있습니다. 필자는 이오니아/각도/Typescript 형식의 프로젝트를 가지고 있으며, 한 페이지는 여러 가지 이온 항목이있는 이온 목록으로 구성되어 있습니다. 검색 상자가있어서 검색 입력에서 문자열이 포함 된 이온 항목 만보고 싶습니다.

난 같은 시도 :

<ion-list> 
<ion-item *ngIf="f(this)"> ... 
</ ion-item> 
</ ion-list> 

및 검색 입력이 그 요소의 innerHTML에 일치 (또는하는 TextContent) 여부를 파라미터로서 요소 및 검사를받는 함수를 썼다.

public f(t: HTMLElement): boolean { 
    return t.textContent.indexOf(this.searchInput) !== -1; 
} 

이 논리의 문제점은 "this"가 함수 내부에서 정의되지 않은 것 같습니다.

Answer 1

이 함수를 어디에서 호출했는지 알 수는 없지만 일부 이벤트 핸들러에서 온 것일 수 있습니다.

보존되는, 화살표 함수로 함수를 정의 해보십시오 "주변" this 즉

const f = (t: HTMLElement): boolean => { 
    return t.textContent.indexOf(this.searchInput) !== -1; 
}