子组件中显示的刷新列表

Question

您好，每个人我都有home组件及其从home组件中获得的子列表组件，当您单击菜单图标时，我可以选择一个项目，并根据此选择，将其渲染到home / list，然后根据该选择获得显示的列表，但在我的案件仅在第一次正确显示，但是如果我更改选择，此处仍然显示相同的列表，其中有一些屏幕截图可以帮助您理解。here I have already chosen "migration" from menu and the list is displayed correctly

and here its the list displayed from an api call

and this describes my problem after choosing the list diplayed without refreshing the data to display

export class ListPage implements OnInit {
  filter: string;
  toolbarTitle: string;
  toolbarColor: string;
  itemIcon: string;
  ots: OtModel[]
  listOtDispl: OtModel[] = [];
  currentUser: Utilisateur
  constructor(private route: ActivatedRoute, private otService: OtService, private utilisateurService: UtilisateurService) {
    this.route.queryParams.subscribe(params => {
      this.filter = params["myParameter"]
    });
    this.utilisateurService.currentUser.subscribe(x => this.currentUser = x);
  }
  ngOnInit() {
    this.getListOt()
  }
  getListOt() {
    this.otService.getAllOt().pipe(map(
      ((listOt: OtModel[]) => listOt.filter(
        (ot: OtModel) => ot.typeOt === this.filter
      ))
    )).
    subscribe(
      (listOt: OtModel[]) => {
        this.ots = listOt
        console.log(this.ots)
      })
  }

HomePage.ts

export class HomePage {
  currentUser: Utilisateur
  typesOt: TypeOtModel[];
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private translateService: TranslateService,
    private utilisateurService: UtilisateurService,
    private otService: OtService) {
    this.utilisateurService.currentUser.subscribe(x => this.currentUser = x);
  }
  ngOnInit() {
    this.getTypeOts()
    console.log(this.typesOt)
  }
  Goto(menu: OtModel) {
    const navigationExtras: NavigationExtras = {
      queryParams: {
        myParameter: menu.typeOt,
      }
    };
    if (menu.typeOt == 'RLA Reservation') {
      this.router.navigate(["home/rla"], navigationExtras);
    } else
      this.router.navigate(["home/list"], navigationExtras);
    console.log(navigationExtras.queryParams.myParameter)
  }
  getTypeOts() {
    this.otService.getTypeOt().subscribe(data => {
      this.typesOt = data as TypeOtModel[]
    })
    console.log(this.typesOt)
  }
}

listpage.html

<ion-header>
</ion-header>
<ion-content>
   <ion-list>
      <ion-item  button *ngFor="let item of ots  ">
         <!-- <ion-icon name="{{itemIcon}}" slot="end" class ="customIcon" color="{{toolbarColor}}" ></ion-icon> -->
         <ion-label>
            <h2>{{item.idDem}}</h2>
            <!-- <p>{{item.description}}</p> -->
         </ion-label>
      </ion-item>
   </ion-list>
</ion-content>

Answer 1

尝试此

this.route.queryParams.subscribe(params => { 
    this.filter =params["myParameter"] 
    this.getListOt();
});

或
ionViewWillEnter(){
     this.getListOt();
}