如何在Angular 4的Book组件中通过作者ID显示作者名称

嘿，我完全懂你现在卡在哪了——你的Book组件里的book对象只有author_id（或者模板里写的authorId，这里要注意命名一致性哦），没有直接关联的author数据，所以直接写{{book.author.name}}肯定拿不到值。下面给你几个实用的解决方案：

方案1：在组件类中预处理数据，关联作者信息 #

如果你的组件已经能拿到完整的authors数组（比如从服务或者父组件传入），可以在组件初始化的时候，把每个book和对应的author关联起来：

首先，确保组件里有books和authors数据源：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-book',
  templateUrl: './book.comp.html'
})
export class BookComponent implements OnInit {
  books: any[] = []; // 你的书籍数据
  authors: any[] = []; // 你的作者数据，比如从服务获取

  ngOnInit(): void {
    // 预处理书籍数据，给每个book添加author属性
    this.books = this.books.map(book => {
      // 注意匹配id的字段名：如果JSON里是author_id，模板里是authorId，这里要对应
      const matchedAuthor = this.authors.find(author => author.id === book.authorId);
      return { ...book, author: matchedAuthor };
    });
  }
}

然后模板里就可以安全地访问作者名称了，记得加上可选链操作符避免找不到作者时报错：

<ul *ngFor="let book of books" class="list-group-item">
  <li>{{book.name}}</li>
  <li>{{book.language}}</li>
  <li>{{book.authorId}}</li>
  <li>{{book.author?.name || 'Unknown Author'}}</li>
</ul>

方案2：自定义管道（Pipe）来获取作者名称 #

如果不想修改原始的books数据，或者需要在多个地方重复使用这个功能，自定义一个管道会更合适：

首先创建一个管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'authorName'
})
export class AuthorNamePipe implements PipeTransform {
  transform(authorId: number, authors: any[]): string {
    const author = authors.find(a => a.id === authorId);
    return author?.name || 'Unknown Author';
  }
}

然后在Book组件的模板里直接使用这个管道：

<ul *ngFor="let book of books" class="list-group-item">
  <li>{{book.name}}</li>
  <li>{{book.language}}</li>
  <li>{{book.authorId}}</li>
  <li>{{book.authorId | authorName: authors}}</li>
</ul>

别忘了在模块里声明这个管道哦！

方案3：后端返回嵌套数据（最优解，如果可控的话） #

如果你的数据是从后端API获取的，最省心的办法是让后端在返回书籍数据的时候，直接把对应的作者对象嵌套返回，比如返回的JSON变成：

{
  "name": "java",
  "language": "english",
  "author_id": 120130930930,
  "author": {
    "id": 120130930930,
    "name": "某某作者"
  }
}

这样前端不用做任何处理，直接用{{book.author.name}}就能显示名称了。

最后提醒一下：注意检查你的数据字段名！JSON里是author_id，但模板里用的是authorId，要确保TypeScript接口或者数据转换的时候已经把蛇形命名转成驼峰了，不然匹配作者ID的时候会找不到对应的数据哦。

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