Блог

Я новичок в Angular (12), и я борюсь с этой проблемой. Я хочу отобразить на странице более одной случайной цитаты. Мне удалось отобразить несколько, но все они одинаковы друг под другом. У меня нет ошибок в коде. Я пробовал некоторые методы, но не смог этого сделать. Вот код:

app.component.html

 lt;div class="main-content"gt;  lt;div class="joke-wrapper" *ngFor="let joke of jokes"gt;  lt;div class="joke"gt;  lt;pgt;{{ joke.value }}lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;div class="joke-wrapper" *ngFor="let joke of jokes"gt;  lt;div class="joke"gt;  lt;pgt;{{ joke.value }}lt;/pgt;  lt;/divgt;  lt;/divgt; lt;/divgt;   

шутки.сервис.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');  } }  

приложение.компонент.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) =gt; {  this.jokes.push(joke);  }); } }  

Проблема в том, что ваш массив содержит только одну шутку.

Это, вероятно, сработает.

 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) =gt; {  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$!: Observablelt;any[]gt;;    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 lt; amount; i  ) {  jokes.push(this.getRandomJoke())  }   return forkJoin(jokes);  } }  

компонент html:

 lt;div class="main-content"gt;  lt;div class="joke-wrapper" *ngFor="let joke of jokes$ | async"gt;  lt;div class="joke"gt;  lt;pgt;{{ joke.value }}lt;/pgt;  lt;/divgt;  lt;/divgt; lt;/divgt;