Angular Material表格路由跳转报错：路径含undefined段求助

问题重现 #

使用Angular Material表格时，点击行内的查看详情按钮，路径显示为http://localhost:4200/detail/undefined，控制台报错："The requested path contains undefined segment at index 1"，无法正常跳转到详情组件。

代码片段 #

HTML模板 #

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
    <!-- ID Column -->
    <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
       <td mat-cell *matCellDef="let row; let i = dataIndex;" > {{i+1}} </td>
    </ng-container>
  
    <!-- 其他列省略 -->
  
    <!-- Action Column -->
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
      <td mat-cell *matCellDef="let row" > 
      <button mat-button color="warn" [routerLink]="['/detail', row.id]"><mat-icon>remove_red_eye</mat-icon></button>
      <button mat-button color="accent" (click)="edit(row.id)"><mat-icon > border_color</mat-icon></button> 
      <button mat-button color="primary"><mat-icon>delete_forever</mat-icon></button>
      </td>
    </ng-container>
  </table>
</div>

组件逻辑 #

public users!: User[];
public dataSource!: MatTableDataSource<User>;
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) matsort!: MatSort;
displayedColumns: any[] = ['id','firstName', 'lastName', 'email', 'mobile', 'bmiResult', 
  'gender', 'membership', 'startDate', 'action']

constructor(private api: ApiService, private router: Router, private route: ActivatedRoute){}

ngOnInit() {
  this.getUsers()
}
getUsers(){
  this.api.getRegisteredUser().subscribe(result => { 
    if (Array.isArray(result)) { 
      this.users = result; 
      this.dataSource = new MatTableDataSource(this.users); 
      this.dataSource.paginator = this.paginator; 
      this.dataSource.sort = this.matsort; 
    } else { 
      console.error("Received data is not an array:", result); 
    } 
  }); 
}
edit(id: number){
  this.router.navigate(['update', id])
}

路由配置 #

const routes: Routes = [
    { path: '', redirectTo: 'register', pathMatch: "full" },
    { path: 'register', component: CreateRegistrationComponent },
    { path: 'list', component: RegistrationListComponent },
    { path: 'detail/:id', component: UserDetailComponent },
    { path: 'update/:id', component: CreateRegistrationComponent },
];

错误原因 #

1. 表格ID列显示的是索引而非实际ID：当前ID列渲染的是{{i+1}}（循环索引+1），而非数据对象中的row.id，混淆了显示序号和实际数据ID。
2. API返回数据可能缺少id字段：如果后端返回的用户数据中没有id属性，或者字段名不匹配（比如userId而非id），会导致row.id为undefined。
3. 未做空值安全处理：异步加载过程中数据可能未就绪，直接访问row.id会引发undefined。

修复步骤 #

1. 确认API返回数据结构 #

打开浏览器控制台网络面板，查看getRegisteredUser接口的返回值，确保每个用户对象包含id字段（或对应唯一标识字段）。如果字段名不一致，修改User接口定义或调整代码中的字段引用。

2. 修正表格ID列显示 #

将ID列的渲染内容改为实际数据ID，确保和跳转时使用的字段一致：

<ng-container matColumnDef="id">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
  <td mat-cell *matCellDef="let row; let i = dataIndex;" > {{row.id || i+1}} </td>
</ng-container>

用row.id || i+1做兼容，优先显示实际ID，不存在时显示索引。

3. 添加空值安全处理 #

修改跳转按钮的routerLink，使用可选链操作符避免undefined：

<button mat-button color="warn" [routerLink]="row?.id ? ['/detail', row.id] : null" [disabled]="!row?.id">
  <mat-icon>remove_red_eye</mat-icon>
</button>

同时修改edit方法，增加空值判断：

edit(id: number | undefined){
  if(id){
    this.router.navigate(['update', id])
  } else {
    console.warn("Invalid user ID");
  }
}

4. 验证数据加载时机 #

确保dataSource在数据加载完成后才赋值，避免表格渲染时数据未就绪，在模板中添加*ngIf判断：

<div class="mat-elevation-z8" *ngIf="dataSource">
  <table mat-table [dataSource]="dataSource" matSort>
    <!-- 表格内容 -->
  </table>
</div>

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