在 Angular 中与 *ngFor 一起使用时 Flowbite 下拉列表不起作用

Question

在 Angular 中与 *ngFor 一起使用时，Flowbite 下拉列表不起作用。我尝试将动态且唯一的 id 传递给这些项目，但仍然不起作用：

• 按钮ID
• 按钮数据下拉菜单
• 下拉菜单div id
• ul 咏叹调-标记者

<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>
    <button
      [id]="'dropdownButton_' + task.id"
      [attr.data-dropdown-toggle]="'task-detail-dropdown_' + task.id"
      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>
    <!-- Dropdown menu -->
    <div
      [id]="'task-detail-dropdown_' + task.id"
      class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
    >
      <ul class="py-2" [attr.aria-labelledby]="'dropdownButton_' + task.id">
        <li>
          <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
          >
        </li>
        <li>
          <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
          >
        </li>
      </ul>
    </div>
  </div>
</div>

StackBlitz 项目

Answer 1

您收到的错误如本 GitHub 问题中所报告。

您需要按照[说明][2]操作动态组件。

更新app.component.ts文件以使用initFlowbite函数通过数据属性启用交互式组件：

import { initFlowbite } from 'flowbite';

export class TaskComponent {
  ngOnInit() {
    initFlowbite();
  }
}

[2]: 从 'flowbite' 导入 { initFlowbite };