Angular 12单页面展示多条不同随机引用时全部重复如何解决？

问题原因 #

• 模板中重复写了两次*ngFor="let joke of jokes"，等于把同一个数组的内容完整渲染了两遍，只要数组内只有1条数据，就会展示2条完全相同的内容
• 组件初始化时仅调用了1次getRandomJoke()接口，jokes数组始终只有1条随机笑话，遍历多少次都是同一条内容

修复方案 #

1. 修正app.component.html模板 #

删除多余的循环，仅保留1个*ngFor即可，指令本身会根据数组长度自动渲染对应条数的内容：

<div class="main-content">
  <div class="joke-wrapper" *ngFor="let joke of jokes">
    <div class="joke">
      <p>{{ joke.value }}</p>
    </div>
  </div>
</div>

2. 修正app.component.ts请求逻辑 #

如果需要展示N条随机笑话，并行发起N次请求即可，推荐用RxJS的forkJoin批量处理并行请求：

import { Component, OnInit } from '@angular/core';
import { JokesService } from './jokes.service';
import { forkJoin } from 'rxjs'; // 导入forkJoin操作符

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
jokes: any[] = [];
// 定义需要展示的笑话条数，可自行调整
private jokeCount = 5;

constructor(private jokesService: JokesService) {}

ngOnInit() {
  // 生成对应数量的请求数组
  const requestQueue = Array.from({length: this.jokeCount}, () => this.jokesService.getRandomJoke());
  // 并行发起所有请求，全部返回后赋值给jokes数组
  forkJoin(requestQueue).subscribe(jokeList => {
    this.jokes = jokeList;
  });
}
}

jokes.service.ts代码无需修改，按原有逻辑即可正常运行。

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