Can't get data from passing page

hello,
i have a problem to get data from passing another page, this my page…

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  public item: any;
  constructor(
    public navCtrl: NavController,
    public dataProvide: DataEventsProvider,
    public transformProvider: TransformProvider ) {

      this.dataProvide.getTspIndonesia()
      .pipe(
        map((result)=>this.transformProvider.convertToJson(result))
      ) .subscribe(result =>{
        this.item =result ['alert']['info'],
        console.log('Data30DETAIL'+this.item)
      });
  }

  viewItem(item){
    this.navCtrl.push(DetailPage,{
      item:item
    });
  }

}

and this mw view page

@Component({
  templateUrl: 'detail.html'
})
export class DetailPage {
  item:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.item = navParams.get('item');
  }

and this my html page from detail-page

<ion-header>
    <ion-navbar>
        <ion-title>
            Detail
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    {{item.date}}
</ion-content>

but, i have error if i go to detail page

thanks everybody

this.navCtrl.push(DetailPage,{
item:this.item
});

try this