获取“data.slice 不是函数”Angular

Question

我遇到了 data.slice 不是 Angular 中的函数的问题。在这里搜索帮助之前，我已经查看了类似的问题，但问题仍然没有解决。

所以，我有一个 component.ts 类：

export class SportsmenListComponent implements OnInit {
  userDetails: any;
  spd: any;
  users: User[]= [];
  displayedColumns: string[] = ['Id', 'Name', 'Surname', 'BirthDate', 'Email', 'Username', 'UserType'];

  dataSource = new MatTableDataSource<User>(this.users);

  @ViewChild(MatPaginator, { static: true })
  paginator!: MatPaginator;
  @ViewChild(MatSort, { static: true })
  sort!: MatSort;

  constructor(public service: UserService, private toastr: ToastrService, public dialog: MatDialog) { }

  ngOnInit(): void {

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort=this.sort;
    this.userDetailsList();

  }

  public userDetailsList() {
    this.service.getUserProfile().subscribe(
      res => {
        this.userDetails = res
        this.service.getUsersUsers(this.userDetails.belongSection.id, 'Sportsman').subscribe(
          (result) => {
            this.dataSource.data = (result as User[])
          }, error => {
            console.log(error);
          }
        )
      },
      err =>{
        console.log(err);
      }
    );
  }

}

数据源实现在方法userDetailsList()中。我正在尝试使用 http 将数据分配给表。请求工作正常，所以这是客户端的问题。

我的component.html代码是：

<div class="mat-elevation-z1">
   <!-- {{userDetails.belongSection.name}} -->
    <table mat-table [dataSource]="dataSource" matSort>
  
      <ng-container matColumnDef="Id">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> Id</th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.id }} </td>
      </ng-container>
  
      <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.name}} </td>
      </ng-container>
  
      <ng-container matColumnDef="Surname">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> Surname </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.surname}} </td>
      </ng-container>

      <ng-container matColumnDef="BirthDate">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> BirthDate </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.birthDate | date: 'longDate'}} </td>
      </ng-container>

      <ng-container matColumnDef="Email">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> Email </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.email}} </td>
      </ng-container>

      <ng-container matColumnDef="Username">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> Username </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.userName}} </td>
      </ng-container>

      <ng-container matColumnDef="UserType">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header> User Type </th>
        <td mat-cell *matCellDef="let element" class="left-text"> {{element.userType}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  
    <mat-paginator [pageSizeOptions]="[5]"></mat-paginator>
    </div>

所以，我收到了这个错误：

重要提示，我尝试使用 this.dataSource.data = (result as User[]) 来代替 this.dataSource = new MatTableDataSource(result as User[]) 等其他变体，这样问题就消失了，但表格中没有显示数据。

这就是数据在控制台中的显示方式：

Answer 1

您似乎只得到一个对象而不是对象列表，尝试将结果添加到数组并将该数组设置为数据源。

this.dataSource.data = [(result as User[])];

它应该至少在表格中显示一个条目。只是为了确保其余代码按预期工作。