getElementByClassName возвращает Null в NgFor

Question

Я пытаюсь запустить скрипт, который добавит классы к двум div, это приведет к эффекту аккордеона.

Я использую файл JSON для загрузки данных и используя NgFor для создания divs. Проблема в том, что DOM возвращает «Null» при попытке использовать GetElementbyClassName().

Если я удалю NgFor и использую статический текст, это решение работает просто отлично. Когда я включаю NgFor, я всегда получаю Null. Это все работает внутри ngAfterViewInit(), поэтому я не понимаю, почему он не может по крайней мере найти первый div.accordion.

Я не самый сильный фон в программировании, так что если вы могли четко объяснить, что мне нужно сделать, чтобы решить эту проблему, я был бы очень благодарен

HTML

<!--EVENTS--> 
    <section class="eventssection"> 
     <div class="eventscontainer"> 
      <div class="eventsbody"> 
       <div class="eventsheader">Events</div> 
       <div class="notice">Our Events and programs are made possible by our members and public donations</div> 
       <div class="details"> 
        <p>The Halifax Wildlife Association works hard to offer program and events to the public that help educate and generate awareness on issues that affect our wildlife and or access to.</p> 
       </div> 
       <div class="controllers"> 
        <div id="expand" class="button">Expand All</div> 
        <div id="collapse" class="button">Collapse All</div> 
       </div> 
       <div class="accordioncontainer" *ngFor="let event of events"> 
        <!--Button 1--> 
        <div class="accordion">{{ event.title }}</div> 
        <div class="panel"> 
         <p>{{ event.description }}</p> 
        </div> 
       </div> <!--end accordion container--> 

      </div> 
     </div> 
    </section> 

Компонент

@Component({ 
    selector: 'events', 
    templateUrl: "partials/events.html" 
}) 
export class EventsComponent { 
    events = []; 

    constructor(private _eventsService: EventsService){} 
    ngOnInit(){ 
     this._eventsService.getEvents() 
     .subscribe(resEventsData => this.events = resEventsData); 
    } 
    ngAfterViewInit() { 
     //Declare Variables 
     var accordion = document.getElementsByClassName('accordion'); 
     var i   = 0; 

     console.log(accordion); // tests getElementById 

     for (i = 0; i < accordion.length; i++) { 
      accordion[i].onclick = function(){ 
       this.classList.toggle("active"); 
       this.nextElementSibling.classList.toggle("show"); 
      } // click 
     } //for loop 
    } // ngAfterView Init 
} // export class 

Answer 1

Вы можете получить ручку элемента DOM через ElementRef, введя его в конструктор вашего компонента:

constructor(myElement: ElementRef) { ... } 

Docs: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

Может быть, это поможет вам:

1. https://stackoverflow.com/a/38002785/2846450
2. How to get dom element in angular 2

Answer 2

В текущей ситуации Что происходит это ngFor не делают его элемент и вы пытаетесь получить элемент от него. Хотя я предпочту вам пойти на декларативный подход, основанный на шаблонах. Вы не должны явно связывать событие, перейдя через DOM.

<div class="accordioncontainer" *ngFor="let event of events"> 
    <!--Button 1--> 
    <div class="accordion" (click)="event.show = !event.show">{{ event.title }}</div> 
    <div class="panel" [ngClass]="{'show': event.active}"> 
     <p>{{ event.description }}</p> 
    </div> 
</div>