Angular中ngFor内的Flowbite Drawer无法正常工作求助

问题根源 #

1. 重复ID冲突：ngFor循环中每个抽屉都使用相同的id="drawer-example"，HTML要求ID全局唯一，导致Flowbite无法精准匹配按钮与对应抽屉。
2. 初始化时机不匹配：initFlowbite()在AppComponent的ngOnInit中执行，此时ngFor渲染的动态元素尚未生成，Flowbite无法为后续新增的DOM元素绑定事件。

解决步骤 #

1. 为每个抽屉生成唯一ID #

利用ngFor循环中的数据唯一标识（如data.id）或循环索引，为每个抽屉和对应按钮生成专属ID，避免冲突。

修改后的HTML代码示例：

<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-900 dark:text-gray-400">
      <tr>
        <th class="px-6 py-3">
            table header
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 若数据无唯一id，可添加let i = index用索引替代 -->
      <tr *ngFor="let data of this.data?.data;" class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
        <td class="px-6 py-4 text-right">
          <!-- 绑定动态ID到按钮属性 -->
          <div class="text-center">
            <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" 
                    type="button" 
                    [attr.data-drawer-target]="'drawer-example-' + data.id" 
                    [attr.data-drawer-show]="'drawer-example-' + data.id" 
                    [attr.aria-controls]="'drawer-example-' + data.id">
              Show drawer
            </button>
          </div>
          <!-- 动态设置抽屉ID -->
          <div [id]="'drawer-example-' + data.id" 
               class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-gray-800" 
               tabindex="-1" 
               [attr.aria-labelledby]="'drawer-label-' + data.id">
            <h5 [id]="'drawer-label-' + data.id" 
                class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
              <svg class="w-4 h-4 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
              </svg>Info
            </h5>
            <!-- 关闭按钮绑定对应动态ID -->
            <button type="button" 
                    [attr.data-drawer-hide]="'drawer-example-' + data.id" 
                    [attr.aria-controls]="'drawer-example-' + data.id" 
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
              </svg>
              <span class="sr-only">Close menu</span>
            </button>
            <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Supercharge your hiring by taking advantage of our <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.</p>
            <div class="grid grid-cols-2 gap-4">
              <a href="#" class="px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more</a>
              <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get access <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
              </svg></a>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

2. 动态初始化Flowbite组件 #

由于ngFor的内容是异步渲染的，需在数据加载完成后重新调用initFlowbite()，确保Flowbite为新生成的DOM元素绑定事件。

方案A：监听数据变化（适用于输入属性或响应式数据）

在页面组件中实现OnChanges钩子，当数据更新时重新初始化：

import { initFlowbite } from 'flowbite';
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';

export class PageComponent implements OnInit, OnChanges {
  data: any; // 替换为你的数据类型

  ngOnInit(): void {
    // 初始数据存在时初始化
    if (this.data?.data) {
      this.initFlowbiteComponents();
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 数据更新后重新初始化
    if (changes['data'] && changes['data'].currentValue) {
      this.initFlowbiteComponents();
    }
  }

  private initFlowbiteComponents(): void {
    // 延迟执行确保DOM已更新
    setTimeout(() => {
      initFlowbite();
    }, 0);
  }
}

方案B：在数据请求回调中初始化（适用于HTTP请求获取数据）

如果数据是通过HTTP请求获取的，在订阅回调中调用初始化：

import { initFlowbite } from 'flowbite';
import { OnInit } from '@angular/core';
import { DataService } from './data.service'; // 替换为你的数据服务

export class PageComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getData().subscribe(res => {
      this.data = res;
      // 数据加载完成后初始化
      setTimeout(() => {
        initFlowbite();
      }, 0);
    });
  }
}

注意事项 #

• 若数据无唯一id字段，可使用循环索引（let i = index）替代，但优先推荐数据自身的唯一标识，避免索引变化导致的问题。
• setTimeout的作用是等待Angular完成DOM渲染周期，确保新元素已插入DOM后再初始化Flowbite。
• 若项目规模较大，可考虑使用Flowbite官方提供的Angular组件库，更贴合Angular生命周期管理，无需手动调用初始化方法。

内容的提问来源于stack exchange，提问作者Alireza Behnamnik