Question

我正在尝试运行一个脚本，将类添加到两个div，这将导致手风琴效果。

我正在使用JSON文件加载数据并使用NgFor构建divs。问题是当尝试使用GetElementbyClassName()时，DOM返回'Null'。

如果我删除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元素的句柄：

constructor(myElement: ElementRef) { ... }

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

这可能会对你有所帮助：

Answer 2

在目前的情况下，ngFor发生的事情是<div class="accordioncontainer" *ngFor="let event of events">  <div class="accordion" (click)="event.show = !event.show">{{ event.title }}</div> <div class="panel" [ngClass]="{'show': event.active}"> <p>{{ event.description }}</p> </div> </div>没有呈现其元素，而你正试图从中获取元素。虽然我更愿意你去模板驱动的声明式方法。您不需要通过循环DOM来显式绑定事件。

.pipe(sass())

getElementByClassName在NgFor中返回Null

2 个答案: