Angular中如何根据电影分类ID匹配对应分类名称？

下面给你几种实用的实现方式，按需选择即可：

方法一：组件内预构建分类映射表（推荐，性能最优） #

先在组件里把categories数组转成以分类ID为键、分类名称为值的对象，模板里直接取值，避免每次渲染都遍历数组浪费性能。

组件代码： #

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

@Component({
  selector: 'app-movie-display',
  templateUrl: './movie-display.component.html'
})
export class MovieDisplayComponent implements OnInit {
  movies: {id: number, category: number, content: string}[] = [];
  categories: {id: number, code: string, name: string}[] = [];
  // 预构建分类映射表
  categoryMap: {[key: number]: string} = {};

  ngOnInit(): void {
    // 这里假设你已经通过服务加载了movies和categories数据
    this.loadMovies();
    this.loadCategories();
    // 构建映射表
    this.categoryMap = this.categories.reduce((map, category) => {
      map[category.id] = category.name;
      return map;
    }, {} as {[key: number]: string});
  }

  // 你的随机获取电影逻辑...
  getRandomMovie() {
    // 现有逻辑保持不变
  }
}

模板代码： #

<!-- 展示随机电影的模板示例 -->
<div *ngIf="randomMovie">
  <h3>{{ randomMovie.content }}</h3>
  <p>分类：{{ categoryMap[randomMovie.category] || '未知分类' }}</p>
</div>

方法二：自定义Angular管道（适合多处复用） #

如果多个组件都需要做分类ID转名称的操作，写个可复用的管道最省心。

1. 生成管道文件 #

用Angular CLI命令快速创建管道：

ng generate pipe category-name

2. 实现管道逻辑 #

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

@Pipe({
  name: 'categoryName'
})
export class CategoryNamePipe implements PipeTransform {
  transform(categoryId: number, categories: {id: number, name: string}[]): string {
    const category = categories.find(c => c.id === categoryId);
    return category ? category.name : '未知分类';
  }
}

3. 模块中声明管道 #

确保你的模块（比如AppModule）导入并声明该管道：

import { CategoryNamePipe } from './category-name.pipe';

@NgModule({
  declarations: [
    // 其他组件、指令...
    CategoryNamePipe
  ]
})
export class AppModule { }

4. 模板中使用 #

<div *ngIf="randomMovie">
  <h3>{{ randomMovie.content }}</h3>
  <p>分类：{{ randomMovie.category | categoryName: categories }}</p>
</div>

方法三：模板内直接查找（不推荐，性能较差） #

如果只是临时测试或者数据量极小，也可以直接在模板里用find方法，但频繁渲染时会重复遍历数组，影响页面性能：

<div *ngIf="randomMovie">
  <h3>{{ randomMovie.content }}</h3>
  <p>分类：{{ categories.find(c => c.id === randomMovie.category)?.name || '未知分类' }}</p>
</div>

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