时间戳

首页 > 解决方案 > 如何显示 AWS Amplify Storage 对象返回的键列表？

angular - 如何显示 AWS Amplify Storage 对象返回的键列表？

问题描述

当我打电话this.amplifyService.storage().list('')时，我可以在 console.log 看到 s3 中对象的键列表。但是，当我尝试将该列表分配给一个属性并在模板中的 ngFor 中使用它时，我收到错误：“无法设置未定义的属性‘文件’”。

我对 Angular 和 AWS 都是新手，所以我确信我没有尝试过所有的东西，并且缺少一些对其中之一或两者都至关重要的东西。

这是我的名为 filegetter 的组件：filegetter.component.ts

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-filegetter',
  templateUrl: './filegetter.component.html',
  styleUrls: ['./filegetter.component.scss']
})
export class FilegetterComponent implements OnInit {
  files = []
  constructor(private amplifyService: AmplifyService) { 
    this.amplifyService.storage().list('')
    .then(function (result) {
      console.log(result);
      this.files = result.json;
    })
    .catch(err => console.log(err))
  }

  ngOnInit() {

  }

}

这是模板文件getter.component.html：


<h3>Files</h3>
<ul *ngIf="files">
    <li *ngFor="let file of files">{{file}}</li>
</ul>

这是控制台中的错误：

0: 
{key: "myphoto.png", eTag: key: "myphoto.png"lastModified: Wed Aug 07 2019 09:47:56 GMT-0700 (Pacific Daylight Time) {}size: 564355__proto__: 
Object1: {key: "teamsweet.jpg", eTag: ""xxxx"", lastModified: Wed Aug 07 2019 09:32:31 GMT-0700 (Pacific Daylight Time), size: 219655}eTag: ""xxxx""key: "teamsweet.jpg"lastModified: Wed Aug 07 2019 09:32:31 GMT-0700 (Pacific Daylight Time) {}size: 219655__proto__: 
Object2: {key: "test.txt", eTag: ""xxxx"", lastModified: Wed Aug 07 2019 09:37:54 GMT-0700 (Pacific Daylight Time), size: 8}eTag: ""xxxx""key: "test.txt"lastModified: Wed Aug 07 2019 09:37:54 GMT-0700 (Pacific Daylight Time) {}size: 8__proto__: Object3: {key: "undefined", eTag: ""xxxx"", lastModified: Wed Aug 07 2019 09:30:33 GMT-0700 (Pacific Daylight Time), size: 219655}eTag: ""xxxx""key: "undefined"lastModified: Wed Aug 07 2019 09:30:33 GMT-0700 (Pacific Daylight Time) {}size: 219655__proto__: 
Objectlength: 4__proto__: Array(0)
filegetter.component.ts:17 TypeError: Cannot set property 'files' of undefined
    at filegetter.component.ts:15
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:32838)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:32819)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)```

标签： angularamazon-s3aws-amplify

解决方案

问题是因为function scope，解决方案是fat arrow

改变这个： 

.then(function (result) { // <---- Because of function()
    console.log(result);
    this.files = result.json; //<--- this.files is not accesible
})

至 ：

.then((result) => { // <----- CHANGE IS HERE
    console.log(result);
    this.files = result.json;
})

有关更多详细信息：请阅读

推荐阅读