html - Angular，如何在一页上显示多个随机报价？

Question

我是 Angular (12) 的初学者，我正在努力解决这个问题。我想在页面上显示多个随机报价。我已经设法显示多个，但它们在彼此下方都是相同的。我的代码没有错误。我尝试了一些 forEach 但做不到。这是代码：

app.component.html

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

笑话.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class JokesService {
  private apiUrl = 'https://api.chucknorris.io/jokes/';
  constructor(private http: HttpClient) {}

  getRandomJoke() {
    return this.http.get(this.apiUrl + 'random');
  }
}

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { JokesService } from './jokes.service';

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

constructor(private jokesService: JokesService) {}

ngOnInit() {
 this.jokesService.getRandomJoke().subscribe((joke) => {
   this.jokes.push(joke);
 });
}
}

标签： htmlangular

Answer 1

问题是您的数组只包含一个笑话。

这可能有效。

import { Component, OnInit } from '@angular/core';
import { JokesService } from './jokes.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    jokes: any[] = [];
    
    constructor(private jokesService: JokesService) {}
    
    ngOnInit() {
        // Multiple times
        this.addJoke();
        this.addJoke();
    }

    addJoke() {
        this.jokesService.getRandomJoke().subscribe((joke) => {
            this.jokes.push(joke);
        });
    }
}

虽然我更喜欢这个解决方案：

利用async管道可以获得一些性能提升，并且它通常是更清洁的代码。

组件 ts：

import { Component, OnInit } from '@angular/core';
import { JokesService } from './jokes.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
    jokes$!: Observable<any[]>;
    
    constructor(private jokesService: JokesService) {}
    
    ngOnInit() {
        this.jokes$ = this.jokesService.getRandomJokes(10);
    }
}

服务ts：

@Injectable({
    providedIn: 'root',
})
export class JokesService {
    private apiUrl = 'https://api.chucknorris.io/jokes/';
    constructor(private http: HttpClient) {}

    getRandomJoke() {
        return this.http.get(this.apiUrl + 'random');
    }

    getRandomJokes(amount: number) {
        const jokes = [];

        for (let i = 0; i < amount; i++) {
            jokes.push(this.getRandomJoke())
        }

        return forkJoin(jokes);
    }
}

组件html：

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