Question

我一直在玩A2一段时间了，我明白我的问题是由于所有内容初始化并在A2中运行的顺序，并且由于html中的*ngIf但是我不知道理解为什么或如何得到我想要的结果。

使用以下测试组件：

@Component({
    moduleId: module.id,
    selector: 'test',
    templateUrl: 'test.component.html' })

export class TestComponent implements OnInit {
    test: any;

    settest():void{ 
        //this.test = {test: 1}; --This works using ngAfterViewInit

        //This causes the console.log in ngAfterViewInit to be null
        this.route.params
            .switchMap((params: Params) => this.testService.getTest(params['id']))
            .subscribe(test => {
                this.test = test;
        });
    }

    ngOnInit(): void
    {
        this.settest();
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 

    ngAfterViewInit(): void
    {
        console.log(document.getElementById('test1')); --Null
        console.log(document.getElementById('test2')); -- Not NUll
    } 
}

和test.component.html

<div *ngIf="test">
    <div id="test1"></div>
</div>
<div id="test2"></div>

我不明白为什么，即使在ngOnInit console.log test1 null返回test2，*ngIf返回元素也是如此。我知道这是因为它在... merchantname.push(val[i].MERCHANTNAME); successtranscs.push(val[i].NO_OF_SUCCESSFUL_TRANSACTIONS); ...内，但我不明白为什么或一旦它被渲染后访问该元素该怎么做，所以我可以作为谷歌地图API的一部分与它进行交互

编辑更新了一些我愚蠢地排除的代码。

Answer 1

如果您使用任何 DOM element <，您可以在 ngAfterViewInit 生命周期挂钩中引用 angular context / strong>关于那个元素。您可以在 DOM element(with Angular context) to be fully available 生命周期挂钩中获得 ngAfterViewInit 。

ngOnInit(): void { this.settest(); console.log(document.getElementById('test1')); // not rendered console.log(document.getElementById('test2')); } ngAfterViewInit(){ console.log(document.getElementById('test1')); // rendered }

无法在ngIf内按ID获取元素

1 个答案: