day.children name検索入力に基づいてプロパティをフィルタリングしたいと思います。1つは秒に依存しているため、ネストされた* ngForに問題があります。dayOverViewByGroupAPIから来ています。のday.childrenような関数でラップしようとしましたfilterIt(day.children)が、無限ループになりました。ありがとうございました。
私は次の（簡略化された）html構造を持っています
<ion-searchbar placeholder="Suchen..." (ionInput)="searchChildren($event)" padding></ion-searchbar>
<ion-grid *ngFor="let day of dayOverViewByGroup; let i = index" padding>
<ion-card *ngFor="let child of day.children; let j = index">
<h1>{{child.name}}</h1>
</ion-grid>
APIからのdayOverview変数のサンプルデータ
// dayOverview variable example data from API
[
{
"name": "Kindergarden 1",
"presence_id": 25,
"totalChildren": 3,
"totalCheckinChildren": 1,
"children": [
{
"name": "John Doe",
"daycareComment": null,
"parentComment": null,
"id": "10633",
"away": null,
"checkin": [],
"additionalDay": false,
"remarks": "",
"awayClass": "",
"reason": "",
"addtionalClass": "",
"disableToggle": false,
"disabled": false,
"checkout": "Nicht anwesend",
"class": "notcheckin"
},
{
"name": "Jane Doe",
"daycareComment": null,
"parentComment": null,
"id": "8322",
"away": null,
"checkin": [],
"additionalDay": false,
"remarks": "",
"awayClass": "",
"reason": "",
"addtionalClass": "",
"disableToggle": false,
"disabled": false,
"checkout": "Nicht anwesend",
"class": "notcheckin"
},
{
"name": "Bastian Paper",
"daycareComment": null,
"parentComment": null,
"id": "86999",
"away": null,
"checkin": [],
"additionalDay": false,
"remarks": "",
"awayClass": "",
"reason": "",
"addtionalClass": "",
"disableToggle": false,
"disabled": true,
"class": "checkin",
"checkout": "Anwesend"
}
]
},
{
"name": "Kindergarden 2",
"presence_id": 26,
"totalChildren": 1,
"totalCheckinChildren": 0,
"children": [
{
"name": "Thomas Mueller",
"daycareComment": null,
"parentComment": null,
"id": "86900",
"away": null,
"checkin": [],
"additionalDay": false,
"remarks": "",
"awayClass": "",
"reason": "",
"addtionalClass": "",
"disableToggle": false,
"disabled": false,
"checkout": "Nicht anwesend",
"class": "notcheckin"
}
]
},
{
"name": "Kindergarden 3",
"presence_id": 27,
"totalChildren": 1,
"totalCheckinChildren": 0,
"children": [
]
}
]
filteredChildren$フィルタリングされた子をdayオブジェクトに放出するObservableを追加します。
作成filteredChildren$するには、フィルター値のObservableが必要です。FormControlを検索バーに追加して、値の変化を聞くことができるようにします。（インポートする必要がありますReactiveFormsModule）
デモ（Angular 5、Ionic 3、RxJS 5.5）
<ion-searchbar placeholder="Suchen..." [formControl]="filterControl" padding></ion-searchbar>
<ion-grid *ngFor="let day of dayOverViewByGroup$ | async; let i = index" padding>
<ion-card *ngFor="let child of day.filteredChildren$ | async; let j = index">
<h1>{{child.name}}</h1>
</ion-card>
</ion-grid>
export class Component {
filterControl = new FormControl();
dayOverViewByGroup$: Observable<any>
ngOnInit() {
const filter$: Observable<string> = this.filterControl.valueChanges.pipe(
startWith(''),
debounceTime(100),
distinctUntilChanged(),
share() // we use filter$ multiple times so we share a single subscription to the source
);
this.dayOverViewByGroup$ = this.fetchData().pipe(
map(days => days.map(day => (
{
...day,
// add an Observable that emits an array of filtered children
filteredChildren$: filter$.pipe(this.filterFrom(day.children))
}
)))
);
}
fetchData(): Observable<any[]> {
// fetch data from Api
return of(data);
}
filterFrom(children: { name: string }[]) {
return (filter$: Observable<string>) => filter$.pipe(
// the filter logic (add your own here)
map(f => children.filter(child => child.name.toLowerCase().indexOf(f.toLowerCase()) > -1))
);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加