javascript - Angular 6 + get elements with class name from document and change style - Stack Overflow

admin管理员组

文章数量:1399180

I have a set of "tabs" in my HTML page. They are nothing but "div" with a class name "tab". My intention is to show one tab at a time and use "Next" and "Previous" buttons to access other tabs. HTML code looks like this.

<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>

Initially all the tabs are hidden with CSS.

.tab{
    display: none; 
}

on page initialization, first tab has to be displayed and rest are hidden. showTab() method in the ponent class is intended for that purpose. shotTab method accepts a "number" that represents the index of the tab to be displayed.

  public showTab(n: number){

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

to show the first tab, showTab() methos is invoked from ngOnInit() method of the ponent. but the line let tabElements = document.getElementsByClassName("tab"); does not return any result. i.e. the length of tabElements is 0. So the application will fail saying that "Cannot read property 'style' of null".

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'style' of null
    at AppComponent.push../src/app/appponent.ts.AppComponent.showTab (appponent.ts:25)
    at AppComponent.push../src/app/appponent.ts.AppComponent.ngOnInit (appponent.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)

I have a set of "tabs" in my HTML page. They are nothing but "div" with a class name "tab". My intention is to show one tab at a time and use "Next" and "Previous" buttons to access other tabs. HTML code looks like this.

<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>

Initially all the tabs are hidden with CSS.

.tab{
    display: none; 
}

on page initialization, first tab has to be displayed and rest are hidden. showTab() method in the ponent class is intended for that purpose. shotTab method accepts a "number" that represents the index of the tab to be displayed.

  public showTab(n: number){

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

to show the first tab, showTab() methos is invoked from ngOnInit() method of the ponent. but the line let tabElements = document.getElementsByClassName("tab"); does not return any result. i.e. the length of tabElements is 0. So the application will fail saying that "Cannot read property 'style' of null".

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'style' of null
    at AppComponent.push../src/app/app.ponent.ts.AppComponent.showTab (app.ponent.ts:25)
    at AppComponent.push../src/app/app.ponent.ts.AppComponent.ngOnInit (app.ponent.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)

• javascript
• css
• angular
• typescript
• angular6

Share Improve this question Follow edited Jan 5, 2019 at 11:59 Renjith asked Jan 5, 2019 at 11:45 RenjithRenjith 1,15411 gold badge2020 silver badges4949 bronze badges 2

• 1 Call showTab() in ngAfterViewInit() instead of ngOnInit(). The difference is that it's run after the children have been initialized. – tao Commented Jan 5, 2019 at 12:02
• thanks... that worked. please post it as an answer. – Renjith Commented Jan 5, 2019 at 12:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Calling showTab() in ngOnInit() means it's called before the children have been initialized.

You need to use ngAfterViewInit() hook.

Full list of ponent lifecycle hooks.

According to your solution I solved my issue like this:

const myHtmlEl = document.getElementsByClassName('my-style').item(0) as HTMLElement;
myHtmltEl.style.display = 'none';

but I am sure I have only one item in whole page with class my-style. otherwise you should loop them with item.length. and apply style to each element.

本文标签： javascriptAngular 6get elements with class name from document and change styleStack Overflow