Angular 4: невозможно прочитать свойство nativeElement из undefined

Я пытаюсь вручную щелкнуть аккордеон, когда компонент загружается. Но в моем случае я получил ошибку консоли, как я упоминал в заголовке, и аккордеон также не нажимается.

аккордеон:

<div class="accordion col-sm-12" id="accordion1" *ngFor='let data of dropdownData; let i=index'>
    <div class="accordion-group">

        <div class="accordion-heading">
            <a class="accordion-toggle h6" data-toggle="collapse"    data-parent="#accordion1" href="#collapseTwo + i" #accordion>
                {{data?.CAMD_ENTITY_DESC}}
            </a>
        </div>

        <div *ngFor='let group of data.group; let j=index' id="collapseTwo + i" class="accordion-body collapse"
         style="margin-left:10px">
            <div class="accordion-inner">
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">

                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" [href]="'#collapseInnerTwo' + j">
                                {{group?.CAMD_PRGRP_DESC}}
                            </a>
                        </div>

                        <div [id]="'collapseInnerTwo' + j" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">

                            <div class="accordion-inner" *ngFor='let subgroup of group?.subgroup; let i=index'>
                                {{subgroup?.CAMD_PRSGRP_DESC}}
                            </div>
                        </div>

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

Здесь я дал #accordion, чтобы получить elementRef.

компонент

export class TwoComponent implements OnInit, AfterViewInit {
  dropdownData: any;
  id: number = 0;

  @ViewChildren('accordion') a: QueryList<ElementRef>;

  constructor(private route: ActivatedRoute, private CartdataService: CartdataServiceService) { }

  ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
        this.dropdownData = data;
      });
  }

  ngAfterViewInit() {
    this.a.changes.subscribe(() => {
      let elementRef = this.a.toArray()[this.id];
      $(elementRef.nativeElement).trigger("click");
    });
  }

}

Может ли кто-нибудь помочь мне решить эту проблему.


person Zhu    schedule 17.07.2018    source источник


Ответы (1)


Если вы хотите, чтобы триггер щелкнул без щелчка, вы должны использовать nativeElement.click

ngAfterViewInit() {
    this.a.changes.subscribe(() => {
      let elementRef = this.a.toArray()[this.id];
       this.a.nativeElement.click;
    });
  }
}
person Chellappan வ    schedule 17.07.2018
comment
вы пытаетесь настроить таргетинг на какой-то конкретный элемент? - person Chellappan வ; 17.07.2018
comment
Я просто пытаюсь щелкнуть аккордеон, используя его индексную позицию @Chellappan - person Zhu; 17.07.2018
comment
Хорошо @Chellappan - person Zhu; 17.07.2018
comment
Тот же код, который я разместил здесь, работает в stackblitz, но не в моем проекте, пожалуйста, помогите мне решить эту проблему stackblitz.com/edit/ @Chellappan - person Zhu; 17.07.2018
comment
в вашем проекте какую ошибку вы получаете сейчас? так вы используете jquery для запуска функции? - person Chellappan வ; 17.07.2018
comment
У меня есть 2 компонента, эта ошибка возникает при переходе от первого компонента ко второму компоненту @Chellappan - person Zhu; 17.07.2018
comment
Дело в том, что у меня один и тот же аккордеон в обоих моих компонентах, я пытаюсь предположить, что у меня есть 3 аккордеона в 1-м компоненте. Если я нажал на 2-й аккордеон в первом компоненте, я хочу открыть аккордеон во 2-м компоненте после загрузки компонента. (здесь позиция индекса передается от 1-го компонента ко второму с использованием служебного файла) @Chellappan - person Zhu; 17.07.2018
comment
так что можете ли вы добавить этот второй компонент также в stackblitz.com - person Chellappan வ; 17.07.2018
comment
Я проверил это в stackblitz, используя два компонента, там тоже работает, у меня эта ошибка только в моем проекте @Chellappan stackblitz.com/edit/ - person Zhu; 17.07.2018
comment
вы добавили jquery с типизацией? и если вы используете href для навигации в приложении angular, он покажет ошибку - person Chellappan வ; 17.07.2018
comment
Да, у меня есть @Chellappan - person Zhu; 17.07.2018
comment
следует избегать jquery в приложении angular, поскольку angular он сам создан для манипуляций с dom. вместо этого подхода используйте любую стороннюю библиотеку, такую ​​как angular material или ng bootstrap, для реализации аккордеона - person Chellappan வ; 17.07.2018
comment
пожалуйста, проверьте его индексный файл, в моем проекте есть следующие элементы: stackblitz.com/edit/angular-rten9p?file=src%2Findex.html - person Zhu; 17.07.2018
comment
почему вы используете jquery для отправки формы и всего остального - person Chellappan வ; 17.07.2018
comment
формы используются в 3-м компоненте, надеюсь, что это не причина этой ошибки @Chellappan - person Zhu; 17.07.2018
comment
Позвольте нам продолжить это обсуждение в чате. - person Chellappan வ; 17.07.2018