Раскрывающийся список Flowbite не работает при использовании с *ngFor в Angular
Раскрывающийся список Flowbite не работает при использовании с *ngFor в Angular. Я пытался передать этим элементам динамический и уникальный идентификатор, но все равно не получилось:
- идентификатор кнопки
- кнопка data-dropdown-toggle
- Идентификатор div раскрывающегося меню
- ul aria-labeledby
<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>
вам, вероятно, понадобится добавить JavaScript, чтобы добавить/удалить класс попутного ветра hidden
Это работает без *ngFor @AndrewAllen
Ответы 1
Ошибка, которую вы получаете, описана в этом выпуске GitHub.
Подход 1
Вы можете реализовать и применить декоратор @FlowBite, как в этом комментарии.
Подход 2
Для работы с динамическими компонентами необходимо следовать инструкции.
Обновите файл app.comComponent.ts, чтобы использовать функцию initFlowbite для включения интерактивных компонентов через атрибуты данных:
import { initFlowbite } from 'flowbite';
export class TaskComponent {
ngAfterViewInit() {
initFlowbite();
}
}
Чтобы узнать об изменениях, вы можете обратиться к этому раздвоенному репозиторию: github.com/yongshun950824/taskify/tree/yongshun950824/…
К сожалению, раскрывающийся список последней задачи не откроется! @ЁнШун
Извините, не заметили об этом. Используйте ngAfterViewInit вместо ngOnInit.
Но в документации сказано, что используется «ngOnInit».
Привет, я думаю, что в этом случае использование NgAfterViewInit означает, что сначала необходимо отобразить представление компонента, особенно для элемента, который необходимо отрисовать динамически, только после этого initFlowBite будет работать.
Можете ли вы воспроизвести это в StackBlitz? Между тем, я не вижу ни одного вашего кода, который бы применял `*ngFor*. Кроме того, пожалуйста, не используйте теги angularjs, поскольку Angular и AngularJS — это разные фреймворки. Спасибо.