итерировать индексированный объект в angular

Question

У меня есть объект спереди, и мне нужно повторить его через ngFor. Дело в том, что ответом бэкэнда является объект следующим образом:

@Component({
  selector: 'docker-logs',
  templateUrl: './docker-logs.component.html',
  styleUrls: ['./docker-logs.component.scss']
})
export class DockerLogsComponent implements OnInit, OnDestroy {
  @Input() deviceId
  dockerlogs: any;

constructor() { this.dockerlogs = Object.keys(this.dockerlogs)}

private getDeviceDockerLogs(): void {
    this.appManagementService.getDeviceDockerLogs(this.deviceId).then(response => {
      this.dockerlogsErrorMessage = null;
      this.dockerlogs = response;
    }).catch(() => {
      this.dockerlogsErrorMessage = "Oops, could not get any device logs.";
    });
  }

}

console.log ответа выглядит следующим образом

this.dockerlogs = {
0: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../libgdbm3_1.8.3-13.1_amd64.deb ..."
1: "[ 2020-03-20 13:12:07 ] Unpacking libgdbm3:amd64 (1.8.3-13.1) ..."
2: "[ 2020-03-20 13:12:07 ] Selecting previously unselected package sgml-base."
3: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../sgml-base_1.26+nmu4ubuntu1_all.deb ..."
4: "[ 2020-03-20 13:12:07 ] Unpacking sgml-base (1.26+nmu4ubuntu1) ..."
5: "[ 2020-03-20 13:12:07 ] Selecting previously unselected package perl-modules-5.22."
6: "[ 2020-03-20 13:12:07 ] Preparing to unpack .../perl-modules-5.22_5.22.1-9ubuntu0.6_all.deb ..."
7: "[ 2020-03-20 13:12:07 ] Unpacking perl-modules-5.22 (5.22.1-9ubuntu0.6) ..."
8: "[ 2020-03-20 13:12:08 ] Selecting previously unselected package libperl5.22:amd64."
9: "[ 2020-03-20 13:12:08 ] Preparing to unpack .../libperl5.22_5.22.1-9ubuntu0.6_
.
.
.
99: "[ 2020-03-20 13:12:12 ] ready ..."


}

Мне нужно распечатать все эти журналы внутри div в моем компоненте, но this.dockerlogs = Object.keys (this.dockerlogs) не работает.

my html:

<div class="logs">
    <div class="logWrapper">
      <!-- <p [innerHTML]="dockerlogs"></p> -->
      <div *ngFor="let log of dockerLogs">
        <p>{{log}}</p>
      </div>
    </div>
  </div>

Answer 1

Глядя на объект, я предполагаю, что он на самом деле выглядит следующим образом

dockerlogs = {
  '0': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../libgdbm3_1.8.3-13.1_amd64.deb ...',
  '1': '[ 2020-03-20 13:12:07 ] Unpacking libgdbm3:amd64 (1.8.3-13.1) ...',
  '2': '[ 2020-03-20 13:12:07 ] Selecting previously unselected package sgml-base.',
  '3': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../sgml-base_1.26+nmu4ubuntu1_all.deb ...',
  '4': '[ 2020-03-20 13:12:07 ] Unpacking sgml-base (1.26+nmu4ubuntu1) ...',
  '5': '[ 2020-03-20 13:12:07 ] Selecting previously unselected package perl-modules-5.22.',
  '6': '[ 2020-03-20 13:12:07 ] Preparing to unpack .../perl-modules-5.22_5.22.1-9ubuntu0.6_all.deb ...',
  '7': '[ 2020-03-20 13:12:07 ] Unpacking perl-modules-5.22 (5.22.1-9ubuntu0.6) ...',
  '8': '[ 2020-03-20 13:12:08 ] Selecting previously unselected package libperl5.22:amd64.',
  '9': '[ 2020-03-20 13:12:08 ] Preparing to unpack .../libperl5.22_5.22.1-9ubuntu0.6_'
}

В этом случае вы можете использовать конвейер keyvalue для печати значений журнала. Попробуйте следующее

<div *ngFor="let log of dockerlogs | keyvalue">
  {{ log.value }}
</div>

Здесь log.key и log.value содержат соответствующие ключи и значения.

Рабочий пример: Stackblitz

Answer 2

Что вы можете сделать, это преобразовать ваш объект в массив, используя Object.values

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";

  dockerlogs = {
    0: "string",
    1: "string",
    2: "string",
    3: "string",
    4: "string",
    5: "string",
    6: "string",
    7: "string",
    8: "string",
    300: "string"
  };

  constructor() {
    this.dockerlogs = Object.values(this.dockerlogs);
  }

}

И в вашем HTML файле:

<p *ngFor="let v of dockerlogs">
  {{v}}
</p>