路由URL角度变化时如何刷新页面

Neelam 发表于 Dev

尼拉姆

我有一个侧边栏，从api中提取并显示项目列表。从侧栏中选择一项时，它会转到一个页面，其中有另一个下拉菜单，并且所选项目的数据显示在该下拉菜单上。但是，当我从侧边栏更改项目时，所选项目的数据应来自的页面没有刷新。

我的侧边栏component.html

<li class="nav-item" *ngFor="let data of getItemList">
  <a href="javascript:void(0)" 
     class="nav-link text-white p-3 sidebar-link" 
     (click)="list(data.Id)">
       <i class="fa fa-clipboard"></i>{{data.ItemName}}</a>
</li>

我的sidebar.component.ts

   list(id) {
    this.router.navigate(["/dashboard/item/item-home/" + id]);
   }

我的item-home.component.html

          <select
                type="number"
                class="form-control"
                (change)="onChangeItemData$event.target.value)"
                formControlName="GroupId"
              >
                <option hidden value="" disabled="true"
                  >Please select Item data
                </option>
                <option
                  *ngFor="let group of itemInfo"
                  type="number"
                  [ngValue]="group.Id"
                >
                  {{ group.Name }}
                </option>
          </select>

我的item-home.component.ts

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
    },
    (err) => { }
  );
  this.fetchGroupInfoByUseCases(this.itemId)
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

尼罗什帕特尔

您需要先解决所有异步任务（承诺或订阅），然后才能执行任何其他任务。因此，fetchGroupInfoByUseCases应在解决路由参数时调用它。

ngOnInit(): void {
  this.route.paramMap.subscribe(
    (routeParam) => {
      const id = parseInt(routeParam.get("id"));
      this.itemId = id;
      this.fetchGroupInfoByUseCases(this.itemId)
    },
    (err) => { }
  );
}

fetchGroupInfoByUseCases(Id) {
  this.usecaseServ
    .getGroupInfoByUseCase(Id)
    .subscribe((res: any) => {
      console.log(res);
      this.groupInfo = res;
    });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。