如何修复“错误类型错误：data.slice 不是函数”？

Question

我正在尝试在我的 Angular 仪表板上使用 Angular Material mat-table 从我的后端显示 JSON。

在过去，我的 JSON 响应是字符串或列表时，我已经成功地完成了很多工作，但我在这里遇到了字典。

我尝试遵循shown on Question 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
                })