Question

我能够通过Angular获取存储在Firebase数据库中的数据，并将其显示在页面上的表中。问题是，只有在我单击网站的其他不同部分后，之后才会显示它。如何使它立即显示？

我的HTML代码：

    <table class="eduTable table table-striped table-borderless">
        <thead>
            <tr>
                <th>Title</th>
                <th>For</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let content of educates">
                <td style="width: 60%">{{content.title}}</td>
                <td>{{content.roles}}</td>
                <td>{{content.updatedAt}}</td>
                <td>
                    <button class="mdc-icon-button material-icons"
                        style="color: #3DA2DA;">edit</button>
                    <button class="mdc-icon-button material-icons"
                        style="color: #EF4850;">cancel</button>
                </td>
            </tr>
        </tbody>
    </table>

我的TypeScript代码：

export class AdminDashboard implements OnInit {
Form: FormGroup;
educates: Array<any> = [];
educate: Educate;

constructor(private fb: FormBuilder, private educateSrv: EducateService) {
    let res = educateSrv.getAll();
    res.then(result => {
        result.subscribe(async _educates => {
            this.educates = _educates;
            console.log("Initial educate", this.educates);
        });
    });
}

ngOnInit() {
    this.Form = this.fb.group({
        roles: [""],
        type: [""],
        url: [""],
        title: [""]
    });
}

Insert() {
    let _educate = new Educate();
    _educate.roles = this.Form.value.roles;
    _educate.type = this.Form.value.type;
    _educate.url = this.Form.value.url;
    _educate.title = this.Form.value.title;
    _educate.createdBy = this.currentUser;
    _educate.updatedBy = this.currentUser;
    let _date = new Date()
        .toISOString()
        .replace(/T/, " ")
        .replace(/\..+/, "");
    _educate.createdAt = _date;
    _educate.updatedAt = _date;
    this.educateSrv.Insert(_educate);
 }
}

Answer 1

您能否尝试添加更改循环以使用如下所示的asyc管道：

<tr *ngFor="let content of educates | async">

Answer 2

Angular不知道可观察对象中会发出新的东西，尤其是如果您使用OnPush changeDetectionStrategy。

通过使用ChangeDetectorRef服务，您可以告诉Angular在发现可观察到的结果时寻找更改：https://angular.io/api/core/ChangeDetectorRef：

constructor(private cd: ChangeDetectorRef, ...){}

result.pipe(
     map( _educates => this.educates = _educates)
     tap(() => this.cd.detectChanges())
).subscribe()

从Firebase使用Angular获取的数据不会立即显示

2 个答案: