Angular 如何使用ngFor from POST请求显示数据

我是Angular的新手，我很难使用*ngFor显示从POST请求到表的数据，我尝试了很多方法，但一点运气都没有

我尝试使用keyvalue管道，但它只循环了4次（因为我认为它是根据数据库中的列数循环的，即4列）

lesson.component.ts

lesson.service.ts

showLesson（）：可观察{
返回此.http.post（'http://localhost/mizpah-backend/lesson.php“，{responseType:“json”}）
}

lesson.component.html

{{i+1}}
{{lesson.lesson_title}
{{lesson.date}
{{lesson.comments}}
下载

---

我希望它显示在一行中，这些是我的列（课程编号、课程标题、课程日期、备注）。但是发生的是表行循环4次。

将为循环的每个元素生成具有

*ngFor

属性的元素。此

*ngFor

迭代对象的每个属性。因此这正是预期的行为。如何在一行中显示所有属性？对不起，我不熟悉此属性。请启用NG fortd。不过你还有其他几个错误，听起来你真的需要学习基础知识。我建议你看一些教程

public lessons: Lessons[] = [];
  public const lesson_mapped;
  ngOnInit() {
    this.Lesson.showLesson().subscribe((response: Response)=>{
      this.lessons = response;
      this.lesson_mapped = Object.keys(this.lessons).map(key =>({type: key, value: this.lessons[key]}))
      console.log(this.lesson_mapped);
    })
  }

showLesson():Observable<any[]>{
    return this.http.post('http://localhost/mizpah-backend/lesson.php',{responseType: "json"})
  }

<tr *ngFor = "let lesson of lesson_mapped | keyvalue">
            <th scope="row">{{ i + 1 }}</th>
            <td>{{ lesson.lesson_title }}</td>
            <td>{{ lesson.date }}</td>
            <td>{{ lesson.remarks }}</td>
            <td style="text-align: center">
              <a class="nav-link">Download</a>
            </td>
</tr>