获取对象数组，然后将其显示在我的组件中答案

【问题标题】：Get array of objects then display it in my component获取对象数组，然后将其显示在我的组件中
【发布时间】：2020-03-11 05:55:22
【问题描述】：

我试图显示一个对象数组。

这就是我进入组件的方式

getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res;
      console.log(this.files);
    })
}

为我服务

getFileList() {
 return this.http.get(`http://localhost:4001/files`)
}

this.files 的输出是：

> {secret: Array(2)} secret: Array(2) 0: files: (2) ["file1.pdf",
> "file2.pdf"]
> __proto__: Object 1: {pass: "88VpGQAtNB"} length: 2
> __proto__: Array(0)
> __proto__: Object

JSON.stringify 给了我输出

stringify gave me {"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}

如何遍历这个对象数组？

<li *ngFor="let file of files" >
{{file}}
</li

这给了我错误：

错误错误：找不到不同的支持对象“[object Object]” '对象'类型。 NgFor 仅支持绑定到 Iterables，例如数组。

有我的后台

app.get('/files', function (req, res) {
  let folder = app.get('filePath');
  const filesInDir = fs.readdirSync(folder, {
      withFileTypes: true
    })
    .filter(item => !item.isDirectory())
    .map(item => item.name)
  res.send({
    secret: [{ files: filesInDir }, { pass: password }],
  })

  return console.log('files from tmp dir: ' + filesInDir)
});

【问题讨论】：

错误信息明确表示你的响应不是数组。您可以尝试console.log(JOSN.stringify(this.files)) 并在此处发布您的问题吗？
@Manish stringify 给了我 {"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}
您可以根据您的响应结构的方式相应地更新您的this.files，应该像这样分配this.files = res.secret[0].files。试试这个，它会解决你的问题。
@Manish 仍然错误：“对象”类型上不存在属性“秘密”
您是否可以在 stackblitz 上创建一个可重现的错误演示。将能够提供更好的帮助

标签： javascript node.js angular

【解决方案1】：

 getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res.files; // get files from res
      console.log(this.files);
    })
    }

您需要更改组件中的方法。

【讨论】：

Got errorL 属性“文件”在“对象”类型上不存在

【解决方案2】：

您需要使用this.files 对象中的文件数组。您遇到的错误是因为您在*ngFor 中使用和对象this.files，而不是您需要使用对象内的files 属性，这是一个列表，因此如下更改您的html 将起作用。

<ul *ngIf="files">
    <li *ngFor="let file of files.secret.files" >
</ul>

解决方案 2：

或者更好的方法是声明一个变量

this.files =[];

然后您执行以下操作：

 getFiles(){
    this.fileService.getFileList().subscribe(res => {
      this.files = res.secret.files; // get files from res
      console.log(this.files);
    })
    }

在你的 html 中

<ul>
    <li *ngFor="let file of files" >
</ul>

【讨论】：

得到错误：FileListComponent.html:4 错误类型错误：无法读取 Object.eval [as updateDirectives] 处未定义的属性“文件”
@MarcinDomorozki 这是因为在 api 返回任何响应之前正在呈现 html，只需在容器上添加一个 *ngIf="files" 即可。我已经更新了我的答案，看看吧
没有错误，但仍然没有。我做了 JSON.stringify 和这里的输出 {"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}
@MarcinDomorozki 没有必要做 JSON.stringify。我错过了你的文件数组在秘密属性中，所以我更新了我的答案。在第二个解决方案中，您也不需要*ngIf
我尝试过这样的事情，但我不知道为什么“对象”类型上不存在属性“秘密”。它是！嗯

【解决方案3】：

您在响应中返回了一个数组。所以你需要使用类似的东西

if (res.secret[0].files) {
   this.files = res.secret[0].files;
}

或者您可以更改来自服务器的响应。

res.send({
secret: {
         files: [filesInDir],
         pass: [password]
        },
})

然后做

this.files = res.secret.files;

【讨论】：

我尝试了第二种解决方案，但是：“对象”类型上不存在属性“秘密”。

【解决方案4】：

注意：仅当您的响应对象不是很大时才使用此方法。

ts 文件

  objKeys = Object.keys; //reference to be used in template
  arrJSON = '{"secret":[{"files":["46544556_2.pdf","org_46544556_2.pdf"]},{"pass":"hoc1WpNj63"}]}';
  arrObj = JSON.parse(this.arrJSON);

html

<div *ngFor="let key of objKeys(arrObj)">
  <div *ngFor="let secretKeyObj of arrObj[key]">
    <div *ngFor="let secKey of objKeys(secretKeyObj)">
      <div *ngIf="secKey === 'files'">
        <p *ngFor="let file of secretKeyObj[secKey]">{{ file }}</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

我是根据@Jazib 的回答做的。

正确的做法是：

 getFiles() {
    this.fileService.getFileList().subscribe(res => {
      this.files = res;
      this.test = this.files.secret.files
      console.log(this.files.secret.files);
    })
  }

和html

<ul>
    <li *ngFor="let file of test" >
</ul>

【讨论】：