Angular zwracanie losowej wartości z array

Question

Próbuję zwrócić jedną losową wartość z tablicy, ale coś nie wychodzi. Jakieś sugestie ?

Array: 

[ { "id": "1", "category": "comedy", "content": "Millers" }, { "id": "2", "category": "horror", "content": "Sinister" }]

HTML:

<div  class="container">
       <p *ngFor="let movie of movies"> {{ movie.content }}</p>    </div>
</div>
<button class="next">
    Next
</button>

Service:

 loadData(): Observable<any> {
        return this.http.get<any>(`http://localhost:3004/movies`).pipe(
            map(response => {
                return response;
            })
        )
    };

Component.ts:

export class HomeComponent implements OnInit {

  public movies:any = [];
  constructor(private PagesService: PagesService
  ) { }

  ngOnInit(): void {
    this.loadData()
  };

  loadData() {
    this.PagesService.loadData().subscribe(response => {
      console.log(response)
      this.movies[Math.floor(Math.random() * this.movies.length)];
      //this.movies = response

    })
  };
}

Proóbowałam tez coś takiego :

 <!-- <p>{{ randomValue }}</p>-->

ts.:

// var randomValue = this.movies[Math.floor(Math.random() * this.movies.length)];
    //  return randomValue

 

Answer 1

Samo

this.movies[Math.floor(Math.random() * this.movies.length)];

jedynie odczytuje losowy element z tablicy, ale nic z nim nie robi (chyba, że pod spodem byłby jakiś getter/proxy robiące side effecty). Trzeba natomiast go jeszcze gdzieś użyć/przypisać. Czyli zapis:

this.movies = response

jest ok wewnątrz callbacka przekazanego do subscribe. Następnie poniższy zakomentowany kod ma sens:

var randomValue = this.movies[Math.floor(Math.random() * this.movies.length)];
return randomValue

 i powinien być umieszczony wewnątrz metody, którą templatka wywołuje, żeby wyświetlić wylosowany element z tablicy.

Comments

Nadal nie działa :(

HTML:

 <!-- <p>{{ randomValue }}</p>-->

TS:

export class HomeComponent implements OnInit {

 

  public movies:any = [];

  constructor(private PagesService: PagesService

  ) { }

 

  ngOnInit(): void {

    this.loadData()

  };

 

  loadData() {

    this.PagesService.loadData().subscribe(response => {

      console.log(response)

    })

var randomValue = this.movies[Math.floor(Math.random() * this.movies.length)];

return randomValue

  };

}

---

Zmienna randomValue to powinno być pole klasy (komponentu), więc zrób z tego this.randomValue - wtedy będzie dostępne w templatce. A zwracanie randomValue z metody loadData nie ma sensu, skoro wołasz ją w ngOnInit, ale nie robisz nic ze zwróconą wartością.