类型为‘void’的实参无法分配给数组类型形参及mat-table展示问题

让我来帮你搞定这个问题，咱们一步步拆解：

1. 先搞懂报错的根源 #

你遇到的Argument of type 'void' is not assignable to parameter of type array错误，核心原因是你的getLanguageList()函数没有返回值（是void类型），但你可能在某个地方把它当成数组来用了（比如直接绑定给mat-table的数据源）。

看你现在的函数代码：

getLanguageList() { 
  this.http.get('http://localhost:51601/api/LanguageTables') 
    .map((data : Response) =>{ 
      return data.json() as Language[]; 
    }).toPromise().then(x =>{ 
      this.languageList=x; 
    }) 
}

这个函数只是在内部把请求结果赋值给this.languageList，但本身没有返回任何内容。如果你的组件里是这么用的：

this.dataSource = this.languageService.getLanguageList(); // 这里必报错，因为函数返回void

那肯定会触发这个类型错误。

2. 修复函数并正确对接mat-table #

我给你两种常用的修复方案，选哪种看你的习惯：

方案一：让函数返回Promise，组件中处理赋值 #

先修改service里的getLanguageList，让它返回Promise：

getLanguageList(): Promise<Language[]> { 
  return this.http.get('http://localhost:51601/api/LanguageTables') 
    .map((data : Response) =>{ 
      return data.json() as Language[]; 
    }).toPromise();
}

然后在组件的ngOnInit里调用它，把数据赋值给mat-table的数据源：

import { MatTableDataSource } from '@angular/material/table';

// 组件内定义mat-table数据源
dataSource = new MatTableDataSource<Language>();

ngOnInit(): void {
  this.languageService.getLanguageList().then(languages => {
    this.languageList = languages;
    this.dataSource.data = languages; // 把数据塞给mat-table
  }).catch(error => {
    // 别忘了处理错误，比如给用户个提示
    console.error('获取语言列表失败:', error);
  });
}

方案二：用Observable（Angular更推荐的写法） #

其实Angular官方更建议用Observable而不是Promise，我们可以调整service的函数：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 修改后的函数
getLanguageList(): Observable<Language[]> { 
  return this.http.get('http://localhost:51601/api/LanguageTables') 
    .pipe(
      map((data : Response) => data.json() as Language[])
    );
}

然后在组件中订阅这个Observable：

ngOnInit(): void {
  this.languageService.getLanguageList().subscribe({
    next: (languages) => {
      this.languageList = languages;
      this.dataSource.data = languages;
    },
    error: (err) => {
      console.error('请求出错啦:', err);
    }
  });
}

3. 最后确认mat-table的模板配置 #

要确保你的模板里列定义和Language接口的字段对应上，比如：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 替换成你实际的字段，这里用id和name做示例 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 语言名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 配置表头和行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

同时在组件类里定义要展示的列名数组：

displayedColumns: string[] = ['id', 'name']; // 换成你自己需要展示的字段名

这样操作下来，不仅能解决那个类型错误，数据也能正常显示在mat-table里了～

内容的提问来源于stack exchange，提问作者ganesh gawade