Как исправить «ОШИБКА TypeError: data.slice не является функцией»?

Question

Я пытаюсь отобразить JSON из моего бэкэнда на панели управления Angular с угловой матовой таблицей материалов.

В прошлом я успешно делал это много раз, когда мой ответ JSON представлял собой строку или список,но я борюсь здесь со словарем.

Я попытался последовать совету , показанному на вопросе 51304884 , но безуспешно.

Я нашел решение, которое работает, т.е.помещая мой dict в список в бэкэнде, но я хотел бы понять, как это сделать с помощью dict.

Код для моей панели мониторинга выглядит следующим образом:

component.ts

export class RunningContainersComponent {

  containers = new MatTableDataSource<Containers>();
  displayedColumns: string[] = ['serverName', 'containerCount'];

  @ViewChild(MatSort) sort: MatSort;

  constructor(private cadenzaService: CadenzaService) {
  }

  onUploadResponse(response) {
    this.containers.data = response;
  }

  ngOnInit() {
    this.containers.sort = this.sort;
    this.cadenzaService.getRunningContainers().subscribe(response => this.onUploadResponse(response));
  }
}

service.ts

  getRunningContainers(): Observable<Containers[]> {
    const url = backendUrl + `/running-containers`;
    return this.http.get<Containers[]>(url, {
      headers: new HttpHeaders().set(
        'Authorization', `Bearer ${localStorage.getItem('access_token')}`)
    })
      .pipe(
        tap(response => CadenzaService.log(`${response.length} containers received`)),
        catchError(this.handleError('getRunningContainers', []))
      );
  }

component.html

<div class="global">
  <div class="dashboard-status mat-elevation-z8">
    <table mat-table [dataSource]="containers" matSort matSortActive="serverName" matSortDirection="asc">

      <ng-container matColumnDef="serverName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Engine name</th>
        <td mat-cell style="width:150px;" *matCellDef="let row">{{row.serverName}}</td>
      </ng-container>

      <ng-container matColumnDef="containerCount">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Running containers</th>
        <td mat-cell *matCellDef="let row">{{row.containerCount}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
      </tr>
    </table>

  </div>
</div>

Ошибка, которую я получаю

core.js:15724 ERROR TypeError: data.slice is not a function
    at MatTableDataSource.push../node_modules/@angular/material/esm5/table.es5.js.MatTableDataSource._orderData (table.es5.js:706)
    at MapSubscriber.project (table.es5.js:639)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber.notifyNext (combineLatest.js:83)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber.notifyNext (combineLatest.js:83)

Что я хотел бы увидеть

У меня есть два ключа (имя сервера и количество Docker-контейнеров, работающих на каждом сервере), которые я хотел бы отобразить в таблице.Один столбец показывает имя, другой номер.

Спасибо!

Answer 1

вот как ты это делаешь

let str = 'hi how are you';
let array = [];
array = str.split(' ').map(function (word) {
                   return word
                })