Hi,
First sorry for my English. I need your’s help.
I have created a method that removes one item from array. Everything looks good except for the refresh DOM. Refreshes only after passing by for example the dashboard and back.
Please look at my code:
<ion-content>
<ion-list>
<ion-item-group *ngFor="let group of resources | groups | orderBy: 'date'">
<ion-item-divider sticky>{{ group.date }}</ion-item-divider>
<ion-item-sliding *ngFor="let item of group.resources | orderBy: 'time'">
<button ion-item (click)="itemTapped($event, item)">
<span class="item-time">{{item.time}}</span>
<span>{{item.name}}</span>
<div class="item-note" item-right>{{item.value}}</div>
</button>
<ion-item-options side="left">
<button ion-button color="danger" (click)="deleteItem(item)">
<ion-icon name="trash"></ion-icon>Usuń
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
</ion-content>
resources.ts
import { Component, Input } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';
export class ResorcesPage {
(...)
@Input() item;
@Input() resources: Array<any>;
(...)
deleteItem(item) {
for(var i = 0; i < this.resources.length; i++) {
if(this.resources[i] == item) {
console.log('removed:' + item + '', i);
this.resources.splice(i, 1);
}
}
}
group-pipe.ts
import { Injectable, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'groups' })
@Injectable()
export class Groups implements PipeTransform {
transform(value, args?: string[]): any {
let groups = {};
value.forEach(function(o) {
let date = o.date;
groups[date] = groups[date] ? groups[date] : { date: date, resources: [] };
groups[date].resources.push(o);
});
return Object.keys(groups).map(function(key) { return groups[key] });
}
}
Please help solved this problem. Thanks!