Получить массив объектов, а затем отобразить его в моем компоненте

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 поддерживает только привязку к итерируемым объектам, таким как массивы.

Мой бэкэнд есть

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

Я сделал это на основе ответа @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>

Answer 2

ВНИМАНИЕ : используйте этот подход только в том случае, если ваш объект ответа не очень большой.

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 3

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

вам нужно изменить метод в компоненте.

Answer 4

Вы возвращаете массив в своем ответе. Поэтому вам нужно использовать что-то вроде

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

или вы можете изменить свой ответ, поступающий с сервера.

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

, а затем выполнить

this.files = res.secret.files;

Answer 5

вам нужно использовать массив файлов в объекте this.files. Ошибка, которую вы получаете, заключается в том, что вы используете и объект this.files в *ngFor, вместо этого вам нужно использовать свойство 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>