如何在 Angular 中渲染后端数据答案

【问题标题】：How to render backend data in Angular如何在 Angular 中渲染后端数据
【发布时间】：2021-01-02 08:01:42
【问题描述】：

我有后端数据显示，但我正在尝试使用扩展面板呈现数据，但不知道该怎么做，如果我能得到任何建议或帮助，我将不胜感激。


  constructor(private HelpService: HelpService) {}
  helpSection: {[key: string]: HelpSection } = {};

  helpSection$ = this.HelpService.getHelpSection();


  ngOnInit(): void {

    this.HelpService.getHelpSection().subscribe(() => {
    } )

  }

HTML

<mat-expansion-panel>
   <mat-expansion-panel-header style="align-items: center;">
    <div *ngFor= "let help of helpSection$ | async">{{help.sectionName}}</div>
</mat-expansion-panel-header>
   <a mat-list-item (click)="clicked(1)">Here it will display subSections</a>
</mat-expansion-panel>

【问题讨论】：

标签： html angular typescript api rendering

【解决方案1】：

您可以遍历父 <mat-expansion-panel>

<mat-expansion-panel class="exp-panel" *ngFor= "let help of helpSection$ | async">
  <mat-expansion-panel-header style="align-items: center;">
     <div >{{help.sectionName}}</div>
  </mat-expansion-panel-header>
  <a mat-list-item (click)="clicked(1)">Here it will display subSections</a>
</mat-expansion-panel>

样式

.exp-panel {
  padding: 30px;
  margin-bottom: 20px;
}

【讨论】：

嗨...非常感谢您，但只是想知道如何在每个部分/扩展面板之间腾出空间？
@aasemovie 你说的是哪个空间？
嗨..我上传了图片。你能在我的帖子上再看看吗？谢谢
@aasemovie 你可以添加样式我已经更新了我的答案，添加了exp-panel 类，你可以使用它来玩基本样式。

【解决方案2】：

*ngFor 需要在“mat-expansion-panel”标签中

<mat-expansion-panel *ngFor="let help of helpSection$ | async">

【讨论】：