时间戳

首页 > 解决方案 > 分配的变量是未定义的角度打字稿

angular - 分配的变量是未定义的角度打字稿

问题描述

我有如下代码。构造函数使用路由方法获取先前的路由并在其中设置一个变量。然后 ngOnInit() 调用一个方法，该方法又调用另一个方法将通过构造函数保存的变量与服务中的列表值进行比较。此时比较存储在构造函数中的变量总是未定义。但是在构造函数内部，this.selBoard 的值是 40。在控制台中打印的值是 'console.log(this.selBoard);' 总是未定义。我哪里错了？尽管它是一个同步调用，但在构造函数中正确打印了 40 的值，因此它的值不可能在 getRouterDetails() 中未定义

//...
selBoard : number;
selectedBoard : Board= new Board();

    constructor(private router: Router){
    this.router.events.pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
            .subscribe((events: RoutesRecognized[]) => {
            var url = events[0].urlAfterRedirects;
            var urlIndex = url.indexOf('boardId=');
            var boardId = url.substring(urlIndex+8, urlIndex+10);
            this.selBoard = Number(boardId);
            console.log('selBoard --- '+this.selBoard);
            });
            
    ngOnInit(): void {
    //..
    if(this.loggedInUser.isAdmin)  {
        this.loadBoardsList();}
    ..//
    }
    
    
    loadBoardsList(){ 
            this._boardService.loadBoards().subscribe( posts =>{
                this.data = posts; 
                console.log('loadBoardsList',this.data);
                },
                error => { 
                console.log('loadBoardsList - error',error);
               // this._errorService.handleError(error); 
                this._messageService.add({severity:'error', summary:'Error Message', detail:error.error+' - '+error.message, sticky: true}); 
                }, 
                () => {  
                this.boardsList = this.data.boardLi; 
                this.getRouterDetails();
                console.log(this.selectedBoard);
            });  
    }
    
    getRouterDetails(){
       for (let i = 0; i < this.boardsList.length; i++) {
            console.log(this.boardsList[i].id);
            console.log(this.selBoard);
            if(this.boardsList[i].id == this.selBoard){
                console.log('Which one selected ---'+this.selBoard);
                this.selectedBoard = this.boardsList[i];
            }
        }
     }

任何建议都非常感谢。谢谢你。

标签： angulartypescriptangular-router

解决方案

您似乎正在做一种极其复杂的获取参数值的方法。为什么不直接使用 this.route.queryParams？

constructor(private route: ActivatedRoute) { 
  this.route.queryParams.subscribe(params => {
    this.boardId = params.boardId;
  });
}

推荐阅读