如何解决“错误TypeError：data.slice不是函数”？

Question

我正在尝试在带有角材料垫表的Angular仪表板上从后端显示JSON。

过去，我的JSON响应是字符串或列表，但我在此方面做得很成功，但是在这里我很难用字典。

我尝试遵循shown on Question 51304884的建议，但没有运气。

我找到了一个可行的解决方案，即将我的字典放在后端的列表中，但我想了解如何使用字典来做到这一点。

我的仪表板代码如下：

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