NGFOR未显示Firebase实时数据库中的数据 - Angular

Question

ctustorService

export class CaptorsService {
  private dbPath = "/auto/captor";
  captorsRef: AngularFireList<any> = null;
  constructor(private database: AngularFireDatabase) {
    this.captorsRef = database.list(this.dbPath);
  }

  getAll(): AngularFireList<any> {
    return this.captorsRef;
  }
}

captorcomponent

export class CaptorsComponent implements OnInit {
  captors: any[];

  constructor(private captorsService: CaptorsService) {}

  ngOnInit() {
    this.retrieveCaptors();
  }

  public retrieveCaptors(): void {
    this.captorsService
      .getAll()
      .snapshotChanges()
      .pipe(map((changes) => changes.map((c) => ({ key: c.payload.key }))))
      .subscribe((data) => {
        this.captors = data;
      });
  }
}

template

<div *ngFor="let captor of captors">{{captor.key}}</div>

当数据从Firebase加载时，它显示在控制台上，但在DOM中没有显示任何内容。

Answer 1

您正在创建n个div，每个divs都为每个检索的项目。我不知道这是否是一种不好的做法，但是只要我知道，您不应该这样做。
您应该做的是，在 div 中，创建一个 list ，这样：

<div>
  <ul>
    <li *ngFor="let captor of captors">
      {{captor.key}}
    </li>
  </ul>
</div>

这就是我通常做这种事情的方式，如果您正确地填充了您的绑架者数组，这应该有效。

另外，如果要仔细检查绑架阵列是否填充了，请尝试创建一个在控制台中显示数组的按钮，例如：

html：

<button (click)="showData()">CLICK ME!</button>

component： component：component：

showData() {
  console.log(this.captors)
}