Angular 尾风手风琴中的Ngor

发布于03月18日

我一直试图用tailwind 手风琴展示一系列帖子，但效果并不像预期的那样好.当创建帖子时，手风琴将显示标题，但不会展开以显示帖子的内容.我还更改了data-accordion-Target的属性，以使用"ngfor:index as I"动态定位Body.此外，我不确定将 struct 指令放在哪里，因为它有点像是显示了两个单独的手风琴.

<div id="accordion-collapse" data-accordion="collapse">
  <div *ngFor="let post of posts; index as i">
    <h2 id="accordion-collapse-heading-1">
      <button type="button"
        class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
        attr.data-accordion-target="#accordion-collapse-body-{{i}}" aria-expanded="true"
        attr.aria-controls="accordion-collapse-body-{{i}}">
        <span>{{post.title}}</span>
        <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M9 5 5 1 1 5" />
        </svg>
      </button>
    </h2>
    <div id="accordion-collapse-body-{{i}}" class="hidden" attr.aria-labelledby="accordion-collapse-heading-{{i}}">
      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <p class="mb-2 text-gray-500 dark:text-gray-400">{{post.content}}</p>
      </div>
    </div>
  </div>
</div>

/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{html,ts}", "./node_modules/flowbite/**/*.js" // 1. add this line ], theme: { extend: {}, }, plugins: [ require('flowbite/plugin') // 2. add this line ], }

import { Component } from '@angular/core'; import { OnInit } from '@angular/core'; import { initFlowbite } from 'flowbite'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'web-app'; ngOnInit(): void { initFlowbite(); } }

Angular 尾风手风琴中的Ngor

推荐答案

Angular相关问答推荐

根据Angular中的构建来卸载独立组件

接收错误NullInjectorError：R3InjectorError(_AppModule)[config—config]....>过度安装Angular—Markdown—Editor

角部炎问题

将Angular 17中的http服务与独立组件一起使用

NGX- colored颜色 Select 器安装出错

AOS中的数据绑定--可能吗？

Angular 17多内容投影错误

我正在try 将一个带有模块联盟的Angular 8项目expose 到另一个Angular 项目，Angular 是15，这可能吗？如果是这样，有什么建议吗？

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用？

无法在单个元素上多次监听同一个事件

Angular 为什么延迟加载返回空路径？

Angular 服务decorator 提供在延迟加载的根效果

使用 NPM 安装 Font Awesome 5

CORS 错误：requests are only supported for protocol schemes： http…等

如何以Angular 获取嵌套表单组的控件

Angular 2 中的 $implicit 是什么？

formGroup 需要一个 FormGroup 实例

如何使用 @ngrx/store 获取 State 对象的当前值？

为什么 ngOnInit 被调用两次？

如何在 Angular Material 中设置图标的 colored颜色？