无法读取未定义的属性“有效载荷”

Question

我运行我的angular 8项目，然后得到一个错误。 TypeError：无法读取未定义的属性“有效载荷” 这是我的gallery.html代码

<div class="img-fluid">
<ul *ngFor="let item of imageList" class="collection">
<div class="col-md-3">
  <mdb-card cascade="true" narrower="true">

  <!--Card image-->
  <div class="view overlay waves-light" mdbWavesEffect>
    <mdb-card-img [src]="item.url" class="card-img h-100"></mdb-card-img>
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>

  </div>

  <!--/.Card image-->

  <!--Button-->
  <a mdbBtn floating="true" class="btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
    <mdb-icon fas icon="chevron-right" class="pl-1 waves-light" mdbWavesEffect></mdb-icon>
  </a>

  <!--Card content-->
  <mdb-card-body>

    <!--Title-->
    <mdb-card-title>
      <h4><strong >{{item.name}}</strong></h4>
    </mdb-card-title>
    <a class="activator px-3 mr-2">
      <mdb-icon fas icon="share-alt"></mdb-icon>
    </a>

    <hr>
    <!--Text-->
    <p class="font-small grey-dark-text mb-0">Category: <strong >{{item.cat}} </strong> </p>
    <a href="{{item.url}}" class="waves-light">
      <h5 class="waves-light" mdbWavesEffect>Download
        <mdb-icon fas icon="chevron-right" class="waves-light" mdbWavesEffect></mdb-icon>
      </h5>
    </a>
    <button class="btn btn-success" (click)="deleteimage(item)"> Delete</button>
  </mdb-card-body>
</div>

这是我的gallery.component.ts

deleteimage(data) {
  this.upSvc.deleteimages(data);
}

这是我的service.ts文件

deleteimages(downloadUrl) {
      return this.cf.collection(downloadUrl).doc(this.data.payload.doc.id).delete();
   }

我该如何解决？