Angular - Добавить раскрывающийся список в div - PullRequest
Новая
       92

Angular - Добавить раскрывающийся список в div

1 голос
/ 06 мая 2020

Я пытаюсь добавить раскрывающийся список в div. Код html (раскрывающийся список является примером) - это динамический код c. Несмотря на то, что при нажатии отображается кнопка раскрывающегося списка, раскрывающееся меню не работает. Ниже приведен мой код из файла компонента 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('showfilters') el:ElementRef;


this.el.nativeElement.innerHTML = this.el.nativeElement.innerHTML + `
<div class="dropdown " dropdown>
   <a class="dropdown-toggle  text-light" dropdownToggle> New Dropdown</a>
   <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
     <a class="dropdown-item"> Profile</a>
     <a class="dropdown-item" href="#">Another action</a>
     <div class="dropdown-divider"></div>
       <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
   </div>
</div>
`;

My html <div class="showfilters" #showfilters>

Я также создал пример на StackBlitz .

1 Ответ

0 голосов
/ 06 мая 2020

Я настоятельно рекомендую не добавлять HTML к вашему компоненту таким образом, вместо этого вы можете просто использовать *ngFor с небольшим взломом.

Forked: https://stackblitz.com/edit/bootstrap-dropdown-angular-xcg7xf

Хак ... *ngFor="let dummy of ' '.repeat(dropDownCount).split('')"

в основном создает массив, который имеет точную длину вашей переменной, чтобы *ngFor мог перебирать его.

Если вы настаиваете на том, чтобы чтобы добавить HTML через ваш компонент, вам, возможно, придется взглянуть на это: Эквивалент $ compile в Angular 2

...