[Fixed] Read content from an array in Angular

Issue

I want to output different inch sizes of a bike. For this I have a json file with an array.

[{
"name": "Mountainbike",
"img_url": "assets/img/mountainbike.jpg",
"mount_size": [{"mount_s": "26"},
                {"mount_s": "26"}]}]

in my component I call the json file

bike.component.ts

 export class BikeSelectComponent implements OnInit {
  biketypes: Biketype[] = [];

  constructor(private apiService: ApiService) {
    this.apiService
      .getBikes()
      .subscribe((biketypes) => (this.biketypes = biketypes));
  }

  ngOnInit(): void {}
}

I wanted to generate an extra button for each inch size. How can I do that?

bike.component.html

<div class="container" >
  <div class="row">
    <div class="col-12 "><h1>Welcome</h1></div>
  </div>
  <div class="row text-center">
    <div class="col" *ngFor="let biketype of biketypes">
      <figure>
        <img src="{{biketype.img_url}}" alt="" width="200px" height="200px">
        <figcaption class="bike-name">{{biketype.name}}</figcaption>
          <figcaption ><button class="btn-size">{{biketype.mount_size}} Zoll</button></figcaption>

      </figure>
    </div>
  </div>
</div>

Solution

Since mount_size is an array, you need another *ngFor to iterate through the mount_size array and create buttons for each size. This should work:

<div class="container" >
  <div class="row">
    <div class="col-12 "><h1>Welcome</h1></div>
  </div>
  <div class="row text-center">
    <div class="col" *ngFor="let biketype of biketypes">
      <figure>
        <img src="{{biketype.img_url}}" alt="" width="200px" height="200px">
        <figcaption class="bike-name">{{biketype.name}}</figcaption>
          <figcaption *ngFor="let mt_size of biketype.mount_size">
               <button class="btn-size">{{mt_size.mount_s}} Zoll</button>
          </figcaption>
      </figure>
    </div>
  </div>
</div>