从Firebase以json格式的数据实现数据表

Question

我对angular有点陌生，现在我已经尝试了一段时间，以将Firebase中的数据显示到数据表中。按照教程from this link进行操作后，显示的行中没有数据。感谢您的帮助

这是我的HTML

myIEnum.Select(i => (MyType2)i)

这是我的阻止课程列表组件。

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

这是分组课程模型

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BlockCoursesService } from '../../shared/block-courses.service';
import { BlockCourse } from '../../shared/block-course.model';
import { element } from 'protractor';
import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';
@Component({
  selector: 'app-block-course-list',
  templateUrl: './block-course-list.component.html',
  styleUrls: ['./block-course-list.component.scss']
})
export class BlockCourseListComponent implements OnInit {
  blockCourseList: BlockCourse[];
  clients: any[];
  // Our future instance of DataTable
  dataTable: any;
  constructor(private blockCoursesService: BlockCoursesService, private chRef: ChangeDetectorRef) { }

  ngOnInit() {
    let x = this.blockCoursesService.getData();
    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);
        });
    });
    }
    onEdit(blk: BlockCourse) {
      this.blockCoursesService.selectedCourse = Object.assign({}, blk);
    }
    onDelete(key: string) {
      if (confirm('Are you sure to delete this record ?') === true) {
        this.blockCoursesService.deleteBlockCourse(key);
      }
    }
}

Answer 1

解决方案

要显示异步代码接收的数据，必须使用async管道。只需将async管道放入*ngFor循环中，一切就会按预期进行：

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

如果通过异步方式设置值或解包async和Observable对象，则可以使用Promise管道。

注意

当我看代码时，我不明白为什么blockCourseList被分配了两次。首先分配接收到的item数组，然后迭代item中的所有对象并将其再次添加到blockCourseList中。发生在以下代码中：

只需考虑一下。

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