Expression has changed after it was checked on input hidden type

Ionic Framework ionic-v3
1

I getting this error everytime i run my application, It happens directly when i open my apps. Please help me.

Error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘Servis Seterika Baju’.
at viewDebugError (http://localhost:8100/build/vendor.js:9868:32)
at expressionChangedAfterItHasBeenCheckedError (http://localhost:8100/build/vendor.js:9846:12)
at checkBindingNoChanges (http://localhost:8100/build/vendor.js:10015:15)
at checkNoChangesNodeInline (http://localhost:8100/build/vendor.js:14026:9)
at checkNoChangesNode (http://localhost:8100/build/vendor.js:14000:9)
at debugCheckNoChangesNode (http://localhost:8100/build/vendor.js:14808:45)
at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:14710:13)
at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:72:9)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:14692:21)
at checkNoChangesView (http://localhost:8100/build/vendor.js:13840:14)

home.html


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

<ion-content padding>

  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="openWebpage(serNama,serHarga)">
      <ion-thumbnail item-left>
        <img src="{{ item.gambarServis }}">
      </ion-thumbnail>
        <h2>{{ item.namaServis }} {{ item.hargaServis }} </h2> 
          <p style="white-space:normal;">{{ item.descServis }} : RM{{ item.hargaServis }}</p>
      <ion-input type="hidden" value={{item.namaServis}} [(ngModel)]="serNama"></ion-input>
      <ion-input type="hidden" value={{item.hargaServis}} [(ngModel)]="serHarga"></ion-input>
    </button>
  </ion-list>
</ion-content>

home.ts

import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';
import { Component , ViewChild } from '@angular/core';
import { NavController , AlertController } from 'ionic-angular';
import { InfoServisPage } from '../info-servis/info-servis';

import firebase from 'firebase';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 public items: Array<any> = [];
 verificationId: any;
 code:string = "";
 @ViewChild('phoneNumber') phoneNumber;
  public itemRef: firebase.database.Reference = firebase.database().ref().child('/servis');
  constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser, public alertCtrl: AlertController) {

  }
 ionViewDidLoad() {
    this.itemRef.on('value', itemSnapshot => {
      this.items = [];
      itemSnapshot.forEach( itemSnap => {
        this.items.push(itemSnap.val());
        return false;
      });
    });
  }
  
  openWebpage(serNama,serHarga){

    let servisData = {
        serNama : serNama,
        serHarga : serHarga
    }
    this.navCtrl.push(InfoServisPage, servisData);
}
}

version

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.6
Angular Core : 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4