angular4 Error-无法读取null的属性parentnode和'querySelector'无法正常工作

Question

获取错误 - 无法在htDashboardComponent.activeTab中读取null的属性'parentNode'。我在代码中提到了错误发生的地方。 我认识到的问题是：

 this.setActive([
               tabsEl.querySelector(`#${id}`),
                tabsEl.querySelector(`[href="#${id}"]`).parentNode   
                        ]);

is not setting 'active' class initially at <li class="tab-link" *ngFor="let tab of tabsdata;let i = index;"> </li> at tab.component.html和 在

<div id="tab-1" class="tab-content rmpm" role="tabpanel"></div>

但是，clicking on tab is displaying <div id="tab-1" class="tab-content rmpm" role="tabpanel"></div contents and other 'tab' contents as well respectively.

jsondata.json

{
    "tabsdata": ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"]
}

tab.component.html

<ul class=" nav nav-tabs " role="tablist">
    <li class="tab-link" *ngFor="let tab of tabsdata;let i = index;">
        <a (click)="tabsUL($event)" href="#tab-{{i+1}}" role="tab">{{tab}}</a>
    </li>
</ul>

然而，instead of passing tabsData=[] and using service to get tabsData from jsondata.json in tab.component.ts，     如果我们直接通过      tabsdata = ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"];代码有效。

tab.component.ts

@Component({
      selector: 'app-tab',
      templateUrl: './tab.component.html',
    })
          @Input() tabsdata: any;
          @Output() loadEvent = new EventEmitter<any>();

  tabsUL(param1): any {
    this.loadEvent.emit({ param1 });
  }

htDashboard-Component.component.html

///////////////////////////////////////////////////////////////////////
 <app-tab [tabsdata]='tabsData' (loadEvent)=loadEvtabsUL($event)></app-tab>
///////////////////////////////////////////////////////////////////////

     <div class="col-xs-12 rmpm">
            <div class="tabs tabsMenu" #tabs>
        </div>
        </div>
       <div id="tab-1" class="tab-content rmpm" role="tabpanel">
    </div>
     <div id="tab-2" class="tab-content" role="tabpanel">
    </div>

htDashboard-Component.component.ts

//tabsdata = ["o", "hhh", "Sph", "Custh", "Fieh", "Audh", "Digih"];  -->no error
tabsData  = [];          ---> creating error
     // tab content show handle starts here
         @ViewChild('err') err: ElementRef;
        constructor(private el: ElementRef, public jsonDataService: 
           DataOrMethodCallService) {
                      this.el = el;
                       }
        ngOnInit() {
        this.jsonDataService.getdata().subscribe(
          res=> {
            this.loadData(res)
            }, err => {
           console.log(err);
            });

      }
        ngAfterViewInit() {
          this.activeTab('tab-1');            // set active tabcontent as 'tab-1';
              }
           loadEvtabsUL = ($event) => {
            this.tabsUL($event.param1);
                  }
        loadData(res){
    this.tabsData = res['tabsdata'];
    }            
              tabsUL(event): void {
               let tab_id = event.target.hash.replace('#', '');
               this.activeTab(tab_id);
                event.preventDefault();
                          }

                activeTab(id) {
                 let tabsEl = this.tabs.nativeElement;
                  this.removeActive(tabsEl.querySelectorAll('.active'));
                   this.setActive([
                   tabsEl.querySelector(`#${id}`),
                    tabsEl.querySelector(`[href="#${id}"]`).parentNode   //here error
                            ]);

                          }

            setActive(elems) {
                elems.forEach((el) => {
                     el.className += ' active';
                      });
                       }

                 removeActive(elems) {
                   elems.forEach((el) => {
                   el.className = el.className.replace(' active', '');
                     });
                     }