子组件中显示的刷新列表

Question

大家好我有主页组件及其来自主页组件的子列表组件单击菜单图标时我可以选择一个项目并根据此选择呈现到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();
}

子组件中显示的刷新列表

refresh list displayed in child component

spring-boot

angular

ionic4