Question

我试图显示一组对象。

这就是我进入组件的方式

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

这给了我错误：

错误错误：找不到其他支持对象'[对象对象]' 类型为“对象”。 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)
});

Answer 1

您需要使用this.files对象中的files数组。您收到的错误是因为您正在使用this.files中的对象*ngFor，而需要在对象内部使用files属性，该对象是一个列表，因此可以按以下方式更改html。 / p>

<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>

Answer 2

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

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

Answer 3

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

的东西

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

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

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

然后做

this.files = res.secret.files;

Answer 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>

Answer 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>

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

5 个答案: