Данные Ionic 4 не обновляются автоматически после вставки в серверную часть

#angular #ionic4

#angular #ionic4

Вопрос:

Я пытаюсь создать приложение ionic 4 с базовым CRUD в серверной части, используя PHP. Пока все хорошо. Я успешно вставил новые данные через серверную часть в базу данных MariaDB / MySQL. Моя проблема в том, что компонент ionic page не обновляется автоматически после вставки данных в базу данных. Я не знаю почему. Я пытался найти решение в Интернете, но, похоже, ничего не работает. Я прочитал ‘ChangeDetectorRef’ и уже внедрил его в свой метод insert, но он также не работает. Это меня действительно смущает. Я должен очистить перезагрузку кэша с помощью ctrl shift R в Chrome, чтобы видеть изменения данных каждый раз, когда я выполняю вставку. То же самое с devapp. Похоже, что проблемы с кешем браузера, поэтому я создаю приложение и смотрю, осталось ли оно таким же, и результат остался тем же даже после того, как я создал приложение. Я не вижу изменений данных после вставки. Почему компонент страницы не обновляется автоматически после вставки в базу данных. Пожалуйста, помогите кому-нибудь.

add-data-page.ts

 //add-data-page.ts

async presentAlert(title,message) {
    const alert = await this.ac.create({
      header: title,
      message: message,
      buttons: ['OK']
    });

    alert.onDidDismiss().then(()=>{
      this.router.navigate(['/home']);
    });

    await alert.present();

  }

 saveData(){
    this.presentLoading("Loading").then(()=>{
      this.dk.insertData(this.mydata).subscribe((result:any)=>{
        this.lc.dismiss();
        this.changeRef.detectChanges();
        this.presentAlert("Succes","New data added");
        console.log(result);
       },_error=>{
         this.lc.dismiss();
       });

    });
  

data.service.ts

 

// get data from database
  getDataRest():Observable<any>{
    return this.http.get(this.configUrl).pipe(
      map(result=>{
        console.log(result);
        return resu<
      })
    );
  }

  getDetail(id:any){
    return this.http.get(this.configUrl '?paramId=' id);
  }

  insertData(data:IDataku):Observable<any>{
      return this.http.post(this.configUrl '?ins=true',data);
  }
  

Домашняя страница для отображения данных

 export class HomePage implements OnInit{
  result: Observable<IDataku[]>;
    
  constructor(private dk: DatakuService){}

  ngOnInit(){
      this.result = this.dk.getDataRest();
        
    }

}
  

Комментарии:

1. можете ли вы загрузить HTML-файл своей домашней страницы

2. вот HTML-файл моей домашней страницы <ion-list> <ion-item no-margin [routerLink]="['/home',item.id]" *ngFor="let item of (result | async)"> <ion-label text-capitalize>{{item.name}}</ion-label> </ion-item> </ion-list>

3. Я думаю, что после того, как вы закроете страницу добавления данных, вам следует снова прочитать данные.

4. Я не уверен. Не могли бы вы сказать мне, как именно мне снова прочитать данные в ionic 4?

5. Вот что я делаю после того, как данные были вставлены : async presentAlert(title,message) { const alert = await this.ac.create({ header: title, message: message, buttons: ['OK'] }); alert.onDidDismiss().then(()=>{ this.router.navigate(['/home']); }); await alert.present(); }

Ответ №1:

Попробуйте это

 export class HomePage implements OnInit{
  resu<
  constructor(private dk: DatakuService){}
  ngOnInit(){
      this.dk.getDataRest().subscribe(data => {

       this.result= data;
      });
    }
}