小编Fra*_*aya的帖子

改变路线后我的数据消失了.

场景:

CommentComponent(显示数据) - > ChangeRoute - > CommentComponent(未显示数据)

数据仅在第一次加载时显示,但每当我更改路径时它就会消失.

我发现这个问题与我的案例/问题类似: 使用routerlink后没有FireStore的数据

但是没有一条评论/答案是有帮助的.所以我决定提出这个问题.

COMPONENT.HTML comment.component.html::

<ng-template #noComments>
  <h1>No comment yet.</h1>
</ng-template>
<div *ngIf="comments?.length > 0; else noComments">
  <h1 style="margin-bottom: 3.5vh;">Comments</h1>
  <ul *ngFor="let comment of comments">
      <li>
        <mat-card>
          <h3>{{comment.name}}</h3>
          <p>{{comment.comment}}</p>
        </mat-card>
      </li>
    </ul>
</div>

COMPONENT.TypeScript comment.component.ts::

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

import { CommentService } from '../services/comment.service';
import { Comment } from '../models/comment'; …

我如何等待 uploadTask 以便我可以上传图像/文件并在将下载 url dan 文档插入 firestore 之前先跟踪其进度，

以下代码是我的示例 Vue 项目。它可以正常工作，但请参阅if (portraitFile)，它必须在我必须上传图片的条件下，如果我不想上传图片怎么办？

它必须移动到条件之外if，但它将在文件完成和下载 URL 检索之前异步执行。

目标：将 firestore add() 移到 uploadTask 的完成回调/参数之外。

    async commitCharacter() {
      try {
        let character = this.character;
        let portraitFile = this.portraitFile;

        if (portraitFile) {
          const uploadTask = storageRef
            .child(`characters/${character.id}/portrait.png`)
            .put(portraitFile, { contentType: "image/png" });

          await uploadTask.on(
            "state_changed",
            snapshot => {
              this.portraitUploadProgress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            },
            null,
            async () => {
              character.portraitUrl = await storageRef
                .child(`characters/${character.id}/portrait.png`)
                .getDownloadURL();

              if (character.id) {
              await …