Ioni c 5 - мне нужно обнаружить изменения в массиве после перехода от дочерней страницы к родительской

Question

У меня есть родительский компонент и с помощью запроса добраться до REST API, чтобы сохранить его в массиве, затем все эти данные загружаются в список, пока все в порядке, проблема в том, что я go на дочерний маршрут для отображения информации о конкретных c данных, когда я изменяю или удаляю элемент из массива и возвращаюсь к предыдущему пути, список не обновляется, и я должен выполнить refre sh вручную, чтобы увидеть изменения, используйте 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();

Подробнее об этом вы можете прочитать здесь