ng用于不显示来自firebase实时数据库的数据-Angular

Question

CaptorService

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

模板

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

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

Answer 1

您正在创建n个div，每个div用于检索到的每个项。我不知道这是不是一种糟糕的做法，但只要我知道，你就不应该那样做。您应该做的是，在div中创建一个列表，如下所示：

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

我通常就是这样做的，如果您正确地填充捕获器数组，这应该会起作用。

此外，如果你想仔细检查你的捕获器阵列是否填充良好，试着创建一个按钮，在控制台中显示该阵列，如下所示：

HTML:

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

组件：

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