Javascript 角度6+；从文档中获取具有类名的元素并更改样式

我的HTML页面中有一组“选项卡”。它们只不过是带有类名“tab”的“div”。我的目的是一次显示一个选项卡，并使用“下一步”和“上一步”按钮访问其他选项卡。HTML代码如下所示

<div class="container">
  <div *ngFor="let question of questionList;let i = index" class="questionBox tab">


    {{question.question.query}}

    <br>
    <div *ngFor="let option of question.options">
      <input type="radio" value="{{option.id}}" name="radio_{{i}}" [(ngModel)]="question.selected.id">{{option.text}}
      <br>
    </div>
    {{question.selected | json}}

    <br>
    <br>
    <!--TO DO -->
    <input type="button" class="btn btn-primary" value="Previous">
    <!--TO DO -->
    <input type="button" class="btn btn-primary nxtButton" value="Next">
  </div>
  <input type="button" class="btn btn-success btn-block" value="Submit">
</div>

在页面初始化时，必须显示第一个选项卡，其余选项卡隐藏。 组件类中的showTab（）方法就是用于此目的的。shotTab方法接受一个“数字”，表示要显示的选项卡的索引

  public showTab(n: number){

    let tabElements = document.getElementsByClassName("tab");
    let tabToDisplay = tabElements.item(n) as HTMLElement;
    tabToDisplay.style.display="block";
  }

要显示第一个选项卡，将从组件的ngOnInit（）方法调用showTab（）方法。但是行让tabElements=document.getElementsByClassName（“tab”）不返回任何结果。i、 e.tabElements的长度为0。因此，应用程序将失败，原因是“无法读取null的属性“style”

在

ngOnInit（）

中调用

showTab（）

意味着在子项初始化之前调用它

您需要使用

ngAfterViewInit（）

hook

---

在

ngAfterViewInit（）

中调用

showTab（）

而不是

ngOnInit（）

的完整列表。不同的是，它是在子项初始化后运行的。谢谢。。。成功了。请把它作为答案贴出来。

  public showTab(n: number){

    let tabElements = document.getElementsByClassName("tab");
    let tabToDisplay = tabElements.item(n) as HTMLElement;
    tabToDisplay.style.display="block";
  }

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'style' of null
    at AppComponent.push../src/app/app.component.ts.AppComponent.showTab (app.component.ts:25)
    at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:18)
    at checkAndUpdateDirectiveInline (core.js:9243)
    at checkAndUpdateNodeInline (core.js:10507)
    at checkAndUpdateNode (core.js:10469)
    at debugCheckAndUpdateNode (core.js:11102)
    at debugCheckDirectivesFn (core.js:11062)
    at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)