获得 'data.slice is not a function' Angular

Question

我遇到问题 data.slice 不是 Angular 中的函数。在这里找帮助之前，我已经翻遍了类似的issues，但是还是没有解决问题。

所以，我有一个 component.ts class:

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 将数据分配给 table。请求正常，所以是客户端的问题。

我的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[]) 并且问题消失了，但是table.

中未显示数据

数据在控制台中的显示方式如下：

Answer 1

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

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

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

获得 'data.slice is not a function' Angular

Getting a 'data.slice is not a function' Angular

typescript

asp.net-core

angular

mat-table