1

我正在尝试将下拉列表添加到 div。html代码（下拉是一个例子）是动态代码。即使单击它会显示下拉按钮，但下拉菜单不起作用。以下是我来自组件文件的代码

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>
`;

我的html <div class="showfilters" #showfilters>

我也在StackBlitz上创建了一个示例。

4

1 回答 1

0

我强烈建议不要以这种方式将 HTML 添加到您的组件中，而您可以只使用*ngFor一个小技巧。

分叉：https ://stackblitz.com/edit/bootstrap-dropdown-angular-xcg7xf

黑客...*ngFor="let dummy of ' '.repeat(dropDownCount).split('')"

基本上创建一个具有变量精确长度的数组，以便*ngFor可以迭代它。

如果你坚持必须通过你的组件添加 HTML，你可能需要看看这个：Equivalent of $compile in Angular 2

于 2020-05-06T07:49:04.767 回答