Angular中如何通过书籍AuthorID关联展示对应作者名称

嘿，我来帮你搞定这个需求！要在循环展示书籍时，通过书籍的authorid匹配到对应作者的名称，咱们可以按以下步骤来实现：

第一步：统一Service中的数据字段 #

先提个小细节：你getAuthors()里的作者对象，一个用的是authorid，另一个是_id，字段不统一会导致匹配失败，所以先把作者数据的id字段统一成authorid：

// 修正后的service.ts代码
getAuthors() { 
  this.authors = [
    { name:'raj', authorid:'3e32233edd222221' },
    { name:"roje", authorid:"3e3223" } // 把_id改成authorid，统一字段名
  ]; 
} 
getBooks() { 
  this.books = [
    { name:'2states', lang:'english', bookid:'123333', authorid:'3e32233edd222221' }
  ]; 
}

第二步：在组件中处理数据关联 #

在你的组件类里，先注入service，获取书籍和作者数据，然后写一个方法来根据authorid查找对应的作者名称：

// app.component.ts示例代码
import { Component, OnInit } from '@angular/core';
import { YourServiceName } from './path-to-your-service'; // 替换成你的service实际路径

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  books: any[] = [];
  authors: any[] = [];

  constructor(private yourService: YourServiceName) {}

  ngOnInit(): void {
    // 从service获取数据
    this.yourService.getAuthors();
    this.authors = this.yourService.authors;
    
    this.yourService.getBooks();
    this.books = this.yourService.books;
  }

  // 根据authorid获取作者名称的方法
  getAuthorName(authorid: string): string {
    // 从authors数组中匹配对应的作者
    const matchedAuthor = this.authors.find(author => author.authorid === authorid);
    // 找到返回名称，没找到返回默认值避免空显示
    return matchedAuthor ? matchedAuthor.name : '未知作者';
  }
}

第三步：在模板中调用方法显示作者名称 #

修改你的app.component.html，在循环里调用上面写的getAuthorName方法，传入当前书籍的authorid：

<div *ngFor="let book of books"> <!-- 建议用div循环包裹，a标签如果是跳转用途，单独嵌套在内部更合理 -->
  <p>{{book.name}}</p> 
  <p>{{book.lang}}</p> 
  <p>{{book.authorid}}</p> 
  <!-- 调用方法显示对应作者名称 -->
  <p>{{getAuthorName(book.authorid)}}</p>
</div>

额外优化提示 #

如果你的service是通过HTTP请求获取真实数据（不是硬编码），记得用Observable订阅数据，确保数据加载完成后再进行匹配。另外，为了避免模板中频繁调用方法影响性能，可以提前在组件初始化时把书籍和作者数据关联好：

// 在ngOnInit中提前处理关联数据
ngOnInit(): void {
  this.yourService.getAuthors();
  this.yourService.getBooks();
  
  // 同步数据场景下的处理，异步场景要等数据返回后执行
  this.authors = this.yourService.authors;
  this.books = this.yourService.books.map(book => {
    const matchedAuthor = this.authors.find(author => author.authorid === book.authorid);
    return {
      ...book,
      authorName: matchedAuthor ? matchedAuthor.name : '未知作者'
    };
  });
}

之后模板里直接用{{book.authorName}}就能显示作者名称了。

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