typescript - class object not available after subscribe method in ngOnInit()

Question

I have public object called resultList and breadcrumbs value in subscribe method. This object resultList and breadcrumbs are empty after observable is completed.

Due to this no view is created in html file.

Below is my TS file ->

    export class BreadcrumbComponent implements OnInit {
    
      public menu: Array<any> = [];
      public breadcrumbs: Array<any> = [];
      public resultList: Array<any> =[];
    
      constructor(private menuService: MenuService, public router: Router) {
      }
    
      ngOnInit(): void {
        this.menu = this.menuService.getMenu();
        this.listenRouting();
        console.log("resultList in ngOnInit->" + JSON.stringify(this.resultList));
        console.log("breadcrumbs in ngOnInit->" + JSON.stringify(this.breadcrumbs));
      }
    
    
      listenRouting() {
    
        let routerUrl: string, currentRoute: string, target: any, child: any, subChild: any;
        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((routerEvent: any) => {
          routerUrl = routerEvent.urlAfterRedirects;
          if (routerUrl && typeof routerUrl === 'string') {
            target = this.menu;
            currentRoute = routerUrl.slice(1).split('/')[0];
            for (let element of target) {
              for (let childElement of element.children) {
                subChild = childElement.children.find(page => page.path.slice(2).split('/')[0] === currentRoute);
                if (subChild != undefined) {
                  this.resultList.push({
                    name: subChild.name,
                    path: subChild.path
                  });
                  this.resultList.push({
                    name: childElement.name,
                    path: childElement.path
                  });
                  break;
                } else {
                  child = childElement.path.slice(2).split('/')[0] === currentRoute ? childElement : undefined;
                  if (child != undefined) {
                    this.resultList.push({
                      name: childElement.name,
                      path: childElement.path
                    });
                    break;
                  }
                }
              }
              if (this.resultList.length > 0) {
                this.resultList.push({
                  name: element.name,
                  path: element.path
                });
                break;
              }
    
            }
            this.breadcrumbs = this.resultList.reverse();
            console.log("resultList in subscribe->" + JSON.stringify(this.resultList));
            console.log("BreadCrumb in subscribe ->" + JSON.stringify(this.breadcrumbs));
          }
        });
    
      }
    }

Below is my HTML file ->

<div class="container">
  <div class="col">
    <ul>
      <li *ngFor="let item of breadcrumbs">
        {{ item?.name }}
      </li>
    </ul>
  </div>
</div>

From console log it looks like observable is finished and then object is ngOnInit() is displayed but still it is empty. Below is output of console log :-

breadcrumb.component.ts:71 resultList in subscribe->[{"name":"Appeals","path":"./appeals"},{"name":"Appeals","path":"./appeals"},{"name":"Appeal Details","path":"./appealinfo/:id"},{"name":"Appeals","path":"./appeals"}]
breadcrumb.component.ts:72 BreadCrumb in subscribe ->[{"name":"Appeals","path":"./appeals"},{"name":"Appeals","path":"./appeals"},{"name":"Appeal Details","path":"./appealinfo/:id"},{"name":"Appeals","path":"./appeals"}]
breadcrumb.component.ts:71 resultList in subscribe->[{"name":"Licence","path":"./licence"},{"name":"Licence Details","path":"./licenceinfo/:id"}]
breadcrumb.component.ts:72 BreadCrumb in subscribe ->[{"name":"Licence","path":"./licence"},{"name":"Licence Details","path":"./licenceinfo/:id"}]
breadcrumb.component.ts:24 resultList in ngOnInit->[]
breadcrumb.component.ts:25 breadcrumbs in ngOnInit->[]

Please provide me solution to make sure I have value of breadcrumbs object before the html view is created.

Thanks

question from:https://stackoverflow.com/questions/65889912/class-object-not-available-after-subscribe-method-in-ngoninit

Answer 1

Waitting for answers