Angular中使用*ngFor时Flowbite下拉菜单失效问题求助

问题核心是Flowbite的下拉组件默认在页面初始加载时完成初始化，但*ngFor动态生成的元素在初始化阶段还没出现在DOM里，导致交互事件没绑定上。下面给两种可行的解决办法：

办法一：使用Flowbite Angular官方封装组件（推荐） #

官方封装的组件会自动适配Angular的生命周期，不用手动处理动态元素的初始化：

1. 安装依赖：

npm install flowbite-angular

2. 在你的模块文件（比如app.module.ts）中导入Dropdown模块：

import { DropdownModule } from 'flowbite-angular';

@NgModule({
  imports: [
    // 其他导入项
    DropdownModule
  ]
})
export class AppModule { }

3. 在模板中替换原生Flowbite代码为官方组件，示例：

<div class="mb-3 flex items-center justify-between py-2 px-4 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
  <p class="text-sm">{{ task.text }}</p>
  <div>
    <fb-dropdown>
      <fb-dropdown-trigger>
        <button class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
          <span class="sr-only">Open dropdown</span>
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
            <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"/>
          </svg>
        </button>
      </fb-dropdown-trigger>
      <fb-dropdown-content>
        <fb-dropdown-item>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Edit</a>
        </fb-dropdown-item>
        <fb-dropdown-item>
          <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete</a>
        </fb-dropdown-item>
      </fb-dropdown-content>
    </fb-dropdown>
  </div>
</div>

办法二：手动初始化动态生成的下拉组件 #

如果不想用官方封装，可通过Angular的视图生命周期钩子手动初始化每个动态生成的下拉：

1. 在组件类中引入Flowbite的Dropdown类，监听动态按钮元素：

import { Component, AfterViewChecked, ViewChildren, ElementRef, QueryList } from '@angular/core';
import { Dropdown } from 'flowbite';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements AfterViewChecked {
  tasks = [/* 你的任务数据数组 */];
  @ViewChildren('dropdownBtn') dropdownButtons!: QueryList<ElementRef>;
  private initializedIds = new Set<string>();

  ngAfterViewChecked(): void {
    this.dropdownButtons.forEach(btnEl => {
      const btnId = btnEl.nativeElement.id;
      if (!this.initializedIds.has(btnId)) {
        const dropdownId = btnEl.nativeElement.getAttribute('data-dropdown-toggle');
        const dropdownEl = document.getElementById(dropdownId);
        if (dropdownEl) {
          new Dropdown(btnEl.nativeElement, dropdownEl);
          this.initializedIds.add(btnId);
        }
      }
    });
  }
}

2. 在模板中给按钮添加模板引用标记#dropdownBtn：

<button
  #dropdownBtn
  [id]="'dropdownButton_' + task.id"
  [attr.data-dropdown-toggle]="'task-detail-dropdown_' + task.id"
  <!-- 其他样式和属性不变 -->
>

注意：确保Flowbite的JS已正确导入到项目中，可在angular.json的scripts数组中添加：

"scripts": [
  "node_modules/flowbite/dist/flowbite.min.js"
]

内容的提问来源于stack exchange，提问作者Mohammad Reza Ghasemi