如何使用来自POST请求的ngFor显示数据

Question

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

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

lesson.component.ts

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);
    })
  }

lesson.service.ts

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

lesson.component.html

<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>

我希望它显示在1行中，这些是我的列（lesson_no，lesson_title，lesson_date，备注）。但是发生的是表行循环了4次。