首页 文章

Angular 6和Angular Material Mat表dataSource 'Object'类型的参数不能分配给'{}[]'类型的参数

提问于
浏览 次
1

我从MySQL数据库获取用户列表，使用 dataSource 属性在 <mat-table> 中显示它：

以下是typescript方法 getUnitData() ，其中我将dataSource值设置为PHP脚本中返回的JSON数组：

export class RegistrationComponent implements OnInit {
  dataSource: MatTableDataSource<units>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
    {
      this.dataSource.paginator.firstPage();
    }
  }

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource = new MatTableDataSource(data);
      },
      (error)=>
      {

      }
    )
  }

}

这是 AuthApiService 的主要方法：

getUnitDataService(){
    if(this.checkIsLogin){
      this.headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

      return this.http.get(this.globalVar.getUnitData,{
        headers: this.headerOptions
      });
    }
    else{
      this.router.navigate(['/login']);
    }
  }

PHP脚本是：

public function getUnitData($conn)
{
    try{
        $sql = "SELECT * FROM unit ORDER BY unit_id DESC";
        $getData = $this->conn->prepare($sql);
        $getDataResult = $getData->execute();
        $getDataSize = $getDataResult->rowCount();
        $getDataResult->fetchAll();

        return $getDataResult;
    }
    catch(PDOException $e)
    {
        echo $e->getMessage();
    }
}

然后我使用以下URL调用另一个文件： this.globalVar.getUnitData .

我得到的错误如下：

1.

[ts]找不到名称'单位' .

2.

'Object'类型的参数不能分配给'any []'类型的参数 . “对象”类型可分配给极少数其他类型 . 你的意思是使用'any'类型吗？ “对象”类型中缺少属性“长度” .

我在堆栈上尝试了this solution，但仍然有同样的错误 .

angular angular-material datasource angular6

1 回答

  • 0

    您是否尝试创建新的MatTableDataSource，其中初始化dataSource var，在ngAfterViewInit中初始化MatPaginator和MatSort，然后在服务方法中调用this.dataSource.data = data

    export class RegistrationComponent implements OnInit {
     //  dataSource: MatTableDataSource<units>;
         dataSource = new MatTableDataSource<units>();

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
     constructor(private auth: AuthApiService) { }

      ngAfterViewInit() {
       // add ngAfterViewInit hook
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
      }

     ngOnInit() {

    }

   applyFilter(filterValue: string){
     this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
   {
    this.dataSource.paginator.firstPage();
   }
 }

 getUnitData(){
   this.auth.getUnitDataService().subscribe(
    (data)=>
   {
     //get data from service pass it to dataSouce.data Object
     this.dataSource.data = data;
   },
    (error)=>
    {

    }
    )
  }

 }
    回复于

相关问题