Angular中如何在现有表单获取选中作者的ID与名称并在MatTable展示

一、在表单组件（bookformcomponent）中获取选中的作者名称 #

你不需要修改现有表单的authorId控件逻辑，利用已有的author$ Observable就能拿到选中作者的名字：

1. 模板中直接显示选中名称 #

在表单模板里添加这段代码（放在合适位置），就能实时显示当前选中的作者名字：

<div *ngIf="author$ | async as authors">
  <span>当前选中作者：{{ authors.find(a => a.id === bookForm.get('authorId')?.value)?.name || '未选择' }}</span>
</div>

2. 在TS代码中获取选中名称 #

如果需要在组件逻辑里（比如保存前处理）用到作者名字，可添加一个方法：

import { take } from 'rxjs';
import { firstValueFrom } from 'rxjs';

// ... 其他代码

async getSelectedAuthorName(): Promise<string | undefined> {
  const authorId = this.bookForm.get('authorId')?.value;
  if (!authorId) return undefined;
  
  // 从作者列表中匹配对应ID的名称
  const authors = await firstValueFrom(this.author$.pipe(take(1)));
  return authors.find(a => a.id === authorId)?.name;
}

调用这个方法就能拿到选中的作者名字，不会影响你现有新增/编辑的核心逻辑。

二、在booklistcomponent的mat-table中显示作者名称 #

因为书籍文档只存了authorId，我们可以把书籍数据和作者列表合并，生成带作者名称的数据集，不改动现有数据存储逻辑：

1. 在TS中合并数据 #

在booklistcomponent里添加合并Observable的代码：

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

// ... 现有代码：books$ 是你的书籍Observable，author$ 是作者列表Observable

// 合并两个数据流，给每个书籍添加作者名称字段
booksWithAuthor$ = combineLatest([this.books$, this.author$]).pipe(
  map(([books, authors]) => {
    return books.map(book => ({
      ...book,
      authorName: authors.find(a => a.id === book.authorId)?.name || '未知作者'
    }));
  })
);

2. 在mat-table中使用合并后的数据 #

修改表格的数据源为合并后的Observable，然后新增作者列：

<table mat-table [dataSource]="booksWithAuthor$ | async">
  <!-- 其他列定义保留 -->
  
  <!-- 新增作者列 -->
  <ng-container matColumnDef="authorName">
    <th mat-header-cell *matHeaderCellDef> 作者 </th>
    <td mat-cell *matCellDef="let book"> {{ book.authorName }} </td>
  </ng-container>

  <!-- 更新displayedColumns数组，加入authorName -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

额外说明 #

如果后续你愿意小幅调整表单逻辑，也可以把mat-select的value改成整个作者对象（[value]="author"），这样表单控件直接拿到id和name，但这需要修改formGroup的控件定义和保存逻辑，如果你现有功能运行稳定，优先用上面的匹配方法，完全不改动现有新增/编辑的核心代码。

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