값이 Dispatched, open 및 closed 인 상태 목록이 있습니다. 확인란을 클릭하면 결과를 필터링하고 싶습니다.
<ion-item *ngFor="let s of appointmentStatus" >
<ion-checkbox [(ngModel)]="s.checked" (click)="updateFilter(s)"></ion-checkbox>
<ion-label >{{ s.status }}</ion-label>
</ion-item>
<div *ngFor="let a of todaysAppointments>
//list of appointments goes here
나는 파이프로 이것을 할 방법을 생각해 냈지만 좋은 예를 찾지 못했고 나는 오히려 새롭다. 어떤 도움을 주시면 감사하겠습니다.
if ((appDate.getDay() == currentDate.getDay()) && (appDate.getMonth() == currentDate.getMonth()) && (appDate.getFullYear() == currentDate.getFullYear()) && this.appointments[i].status != 'Pending') {
this.todaysAppointments.push(this.appointments[i]);
}
if ((appDate.getDay() < currentDate.getDay()) && (appDate.getMonth() >= currentDate.getMonth()) && (appDate.getFullYear() >= currentDate.getFullYear()) && this.appointments[i].status != 'Pending') {
this.upcomingAppointments.push(this.appointments[i]);
}
따라서 아래에서 수행 한 작업은 단일 어레이 만있을 때 완벽하게 작동합니다. 내 HTML에서 오늘과 예정된 약속으로 나뉘어 있습니다. 그래서 먼저 페이지를로드하고 해당 섹션에 모든 약속을 표시합니다. 그런 다음 확인란으로 필터링하고 싶습니다.
<h2 style="background-color:#387ef5">Today's Appointments</h2>
<div *ngFor="let a of todaysAppointments | filter: searchTerm" (click)="openPage(a)">
<h2 style="background-color:#387ef5">Upcoming Appointments</h2>
<div *ngFor="let a of upcomingAppointments | filter: searchTerm" (click)="openPage(a)">
편집하다:
두 개의 배열을 다루기 때문에 구성 요소 파일에 필터 메서드를 사용하는 대신 파이프로 변환 된 원래 답변이 있습니다.
updateFilter(s)필터 값을 추가 또는 제거하려는 경우 메서드를 유지 하거나 클릭 이벤트에 대한 템플릿에서 수행 할 수도 있습니다.
(click)="s.checked ?
filterArr.push(s.status) : filterArr.splice(filterArr.indexOf(s.status), 1)
나는 개인적으로 템플릿을 깨끗하게 유지하기 위해 구성 요소에 해당 논리를 갖는 것을 좋아하지만 그것은 전적으로 당신에게 달려 있습니다 :)
그리고 템플릿에서 해당 배열을 파이프에 전달합니다.
<div *ngFor="let a of todaysAppointments | filterPipe: filterArr">
파이프는 다음과 같이 표시됩니다. 여기서 values필터링하려는 args배열은 체크 박스가 선택된 배열입니다. (이름을 재고하고 싶을 것입니다). 파이프를 불결하게 만들어야 변경이 발생할 때마다 발사됩니다.
@Pipe({name: 'filterPipe', pure: false})
export class MyPipe implements PipeTransform {
transform(values: any, args?: any[]): any[] {
return values = values.filter(a => {
return args.length ? args.indexOf(a.status) != -1 : values;
})
}
}
그렇게해야합니다!
원래 답변 :
여기에 맞춤형 파이프가 전혀 필요하지 않을 수도 있습니다. Array.prototype.filter()클릭 이벤트를 사용할 수 있습니다 .
또한 확인란의 선택 여부를 확인하고 선택된 값을 기준으로 필터링해야합니다. 여기에 별도의 배열에 삽입했습니다 filterArr.
따라서 updateFilter(s)메서드 에서 먼저 확인을 수행하고 해당 필터 값을 배열에 푸시하거나 제거합니다. 그런 다음 값으로 필터링하거나 filterArr비어있는 경우 모든 약속을 반환합니다 .
라는 모든 약속을 저장하는 별도의 배열이 allAppointments있으며 여기에서 값을 필터링합니다 todasyAppointments.
updateFilter(appt) {
if(appt.checked) {
// checkbox is checked, push to filterArr
this.filterArr.push(appt.status)
}
else {
// unchecked box, let's remove it from array
let index = this.filterArr.indexOf(appt.status)
this.filterArr.splice(index, 1)
}
// filter by the values set in filterArr, or if empty, return all appointments
this.todaysAppointments = this.allAppointments.filter(a => {
return this.filterArr.length ?
this.filterArr.indexOf(a.status) != -1 : this.allAppointments;
})
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다