html - 带有简短描述的 Angular Accordian

问题描述

我正在尝试在 Angular 中使用手风琴，它可以显示内容的简短描述。当你点击它时，它应该显示完整的描述。所以基本上我需要对内容进行切片并将其显示在标题中。但我无法这样做。下面是我的代码，你可以看到我在标题中有announcement.title。但是我需要在标题中添加一部分announcement.content。所以我需要将内容分成几个字符并将其显示在标题中。然后当有人点击它时，我会显示完整的内容。我不确定如何实现这一目标。有人可以帮忙吗？

HTML 代码：

<accordion>
    <div *ngFor="let announcement of announcements; let i = index">            
            <accordion-group [heading]="announcement.title">
                <div class="announcement-body" [innerHTML]="announcement.content"> {{ announcement?.content }}
                </div>
            </accordion-group>     
    </div>
</accordion>

TS 文件：

announcements: any[] = [];
 ngOnInit() {
    this.showAnnouncements();
  }
  showAnnouncements() {
    this.configService.getAnnouncements().then(
      (data: any) => {
        for (const key in data) {
          this.announcements.push({
            title: data[key].title,
            content: data[key].content
          });
        }
      }
    ).catch((error) => {
      console.log(error);
    });
  }

在此处输入图像描述

我还需要标题和切片内容以不同字体出现在不同行的标题中。

标签： htmlcssangularbootstrap-4ngx-bootstrap

您可以使用字符串切片方法将部分内容附加到标题。例如：

this.announcements.push({
    title: data[key].title + data[key].content.slice(0,10),
    content: data[key].content
});

这会将内容字符串的前 10 个字符添加到标题中。

如果你想要一些固定的长度，你可以这样做：

title: data[key].title + data[key].content.slice(0,MaxLength - data[key].title.length)

对于最后一种情况，您必须确保您的标题始终低于最大长度或防止切片变为负数。

html - 带有简短描述的 Angular Accordian

问题描述

解决方案

推荐阅读