Ionic 5 - 從子頁面傳遞到父頁面后，我需要檢測對數組的更改

Question

我有一個父組件，通過查詢到達 REST API 以將其保存在一個數組中，然后將所有數據加載到一個列表中，到目前為止一切都很好，問題是當我 Z34D1F91FB2E514B857BZFABA 到子路由到 514B857BZFAB1顯示特定數據的信息，當我從數組中修改或刪除項目並返回上一個路徑時，列表不會更新，我必須手動刷新才能看到更改，使用ion- refresher-content從同一個應用程序執行此操作，但這不是我需要的，我想要它，只要應用程序重定向我，它會自動檢測更改並發出獲取請求並重新加載列表。

我的父頁面的代碼：

export class ListaEnsayosPage implements OnInit {
      ensayos:Ensayo[];
      titulo:string="Lista de Ensayos";

      constructor(private ensayoService:EnsayoService) {
       };

      ngOnInit() {
        this.ensayoService.getAll().subscribe(data=>{
          this.ensayos=data['data'];
        });
      };
      doRefresh(event) {
        setTimeout(() => {
          this.ensayoService.getAll().subscribe(data=>{
            this.ensayos=data['data'];
          });
          event.target.complete();
        }, 1500);
      }
    }

我的子頁面的代碼：

export class EnsayoPage implements OnInit {
          titulo:string="Info ensayo";
          ensayo:Ensayo={
            operador:"",
            distanciaTotal:null,
            radioTrayectoria:null,
            materialBola:"",
            carga:null,
            diametroBola:null,
            codigoProbeta:"",
            durezaProbeta:null,
            tratamientoProbeta:"",
            materialProbeta:"",
            observaciones:"",
          };;

          constructor(private activeRoute:ActivatedRoute, private ensayoService:EnsayoService) {

           }

          ngOnInit() {
            this.activeRoute.params.subscribe(params=>{
              this.ensayo.idEnsayo=params['idEnsayo'];
            });
            if(this.ensayo.idEnsayo){
              this.ensayoService.getOne(this.ensayo.idEnsayo).subscribe(data=>{
                this.ensayo=data['data'];
              });
            };
          }

        }

這是進行修改的表單組件（出於回收代碼的原因，將表單分成一個組件）

formularioEnsayo: FormGroup;
          @Input() ensayo: Ensayo;
          constructor(private ensayoService:EnsayoService, private router:Router) { 
            this.formularioEnsayo = new FormGroup({
              'operador': new FormControl('',Validators.required),
              'observaciones': new FormControl(),
              'idEnsayo': new FormControl(),
              'fecha': new FormControl(),
              'tiempoTotal': new FormControl(),
              'distanciaTotal': new FormControl('',Validators.required),
              'radioTrayectoria': new FormControl('',Validators.required),
              'materialBola': new FormControl('',Validators.required),
              'carga': new FormControl('', Validators.required),
              'diametroBola': new FormControl('',Validators.required),
              'codigoProbeta': new FormControl('',Validators.required),
              'durezaProbeta': new FormControl('',Validators.required),
              'tratamientoProbeta': new FormControl('', Validators.required),
              'materialProbeta': new FormControl('',Validators.required)
            });

          }

          ngOnInit() {
            if(this.ensayo.idEnsayo){
              this.ensayoService.getOne(this.ensayo.idEnsayo).subscribe(async data=>{
                this.ensayo=data['data'];
                await this.formularioEnsayo.setValue(this.ensayo);
              });
            }
          };
          altaEnsayo(){
            if(this.ensayo.idEnsayo){
              const key$=this.ensayo.idEnsayo
              this.ensayo = this.formularioEnsayo.value;
              this.ensayo.idEnsayo=key$;
              this.ensayoService.change(this.ensayo,this.ensayo.idEnsayo).subscribe(data=>{
                this.router.navigate(['/ensayo','lista']);
              })
            }else{
              const data:Ensayo = this.formularioEnsayo.value;
              this.ensayoService.new(data).subscribe(data=>{
                this.router.navigate(['/ensayo','lista']);
              });
            }

          }
          bajaEnsayo(){
            this.ensayoService.delete(this.ensayo.idEnsayo).subscribe(data=>{
              this.router.navigate(['/ensayo','lista',{onSameUrlNavigation:'reload'}]);
            });
          }

        }

如果我們需要查看模板，我會留下 github 鏈接：

父親頁

兒童頁面

表單組件

Answer 1

要讓 Angular 檢測更改，您可以使用ChangeDetectorRef

導入它

import { ChangeDetectorRef } from '@angular/core';

注入它

constructor(private cd: ChangeDetectorRef) { 
}

並在需要的地方使用它

this.cd.markForCheck();
this.cd.detectChanges();

你可以在這里閱讀更多關於它的信息