Показать все данные из таблицы sql. (Angular)

Question

Моя проблема в том, что мне нужно показать все записи таблицы sql в представлении Angular.

Я уже могу получить доступ к элементам по идентификатору, но я хотел бы нажать кнопку, чтобы показать все.

<h3> Mostrar disco</h3>
¿Que disco quieres ver? <input #id><br>
<button type="button" (click) = "mostrarDisco(id.value)">Mostrar</button><br>
<hr>
<div *ngIf="disco!=null">
Titulo:{{disco.titulo}} <br>
Interprete:{{disco.interprete}} <br>
Año Publicacion:{{disco.anyoPublicacion}} <br>
<hr>
</div>

Я знаю, что должен использовать ngFor в представлении, но не знаю, как это сделать.

Запрос API:

router.get('/discos', (req, res)=>{
mysqlConnection.query('SELECT * FROM discos', (err, rows, fields)=>{

    if(!err){
      res.json(rows);
    }else{
     console.log(err);
    }


})

});

Запрос дискотеки по ID:

Сервис:

  getDisco(id:number)
  {
    return this.http.get(this.url + "/" + id)
  }

Компонент:

 mostrarDisco(id:number)


 {
    this.apiService.getDisco(id).subscribe((data) =>
  {
  this.disco = data[0]
  })  
  }

Помогите мне, пожалуйста!

Answer 1

Предположим, что в вашем Компоненте у вас есть вызов API и сохранен ответ JSON на переменные дискотеки.

this.discos = json_response;

В вашем HTML вы можете получить div, как показано ниже:

<div *ngIf="discos" **ngFor="let disco of discos">
Titulo:{{disco.titulo}} <br>
Interprete:{{disco.interprete}} <br>
Año Publicacion:{{disco.anyoPublicacion}}
</div>

Надеюсь, это должно помочь.