Angular 使用firebase中json格式的数据实现datatables

我对angular有点陌生，我一直在尝试将firebase中的数据显示到datatable中。在教程之后，行显示但不显示数据。我将非常感谢你的帮助

这是我的HTML

<div  class="container">
        <table class="table table-hover table-responsive" cellspacing="0">
          <thead class="text-me">
                <tr>
                    <th>Programme</th>
                    <th>Course Code</th>
                    <th>Year</th>
                    <th>Block</th>
                    <th>Course Name</th>
                    <th>Course Material</th>
                    <th>Slides</th>
                    <th>Videos</th>
                    <th>Enrollment</th>
                    <th>Comments</th>
                </tr>

          </thead>
          <tbody>
              <tr *ngFor="let blockCourse of blockCourseList">
                  <td>{{blockCourse.programme}}</td>
                  <td>{{blockCourse.courseCode}}</td>
                  <td>{{blockCourse.year}}</td>
                  <td>{{blockCourse.block}}</td>
                  <td>{{blockCourse.courseName}}</td>
                  <td>{{blockCourse.courseMat}}</td>
                  <td>{{blockCourse.slides}}</td>
                  <td>{{blockCourse.video}}</td>
                  <td>{{blockCourse.enrollment}}</td>
                  <td>{{blockCourse.comment}}</td>
              </tr>
          </tbody>
        </table>
    </div>

这是分段课程模式

export class BlockCourse {
    $key: string;
    courseCode: string;
    year: string;
    block: string;
    courseName: string;
    programme: string;
    courseMat: string
    slides: string;
    video: string;
    enrollment: string;
    comment: string;
}

解决方案 要显示异步代码接收的数据，必须使用

async

pipe。只需将

async

管道放入

*ngFor

循环，一切都应按预期工作：

// ...
<tr *ngFor="let blockCourse of blockCourseList | async">
// ...

---

我已删除this.blockCourseList=项。但是，向代码中添加async仍然没有改变任何事情，如果显示的行中没有数据，您应该检查数据是否有效。尝试将每个

BlockCourse

对象输出到

forEach

循环中的控制台中。

// ...
<tr *ngFor="let blockCourse of blockCourseList | async">
// ...

    x.snapshotChanges().subscribe((item: any[]) => {
        this.blockCourseList = item;

        // this.clients = item;
        this.chRef.detectChanges();
        const table: any = $('table');
        this.dataTable = table.DataTable();

        item.forEach(element => {
          let y = element.payload.toJSON();
          y['$key'] = element.key;
          this.blockCourseList.push(y as BlockCourse);
        });
    });