Html 以角度从数组中读取内容

我想输出不同英寸大小的自行车。为此，我有一个带有数组的json文件

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

在我的组件中，我调用json文件

bike.component.ts

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

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

  ngOnInit(): void {}
}

我想为每英寸的尺寸生成一个额外的按钮。我该怎么做

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>

欢迎
{{biketype.name}
{{biketype.mount_size}}Zoll

由于mount\u size是一个数组，因此需要另一个*ngFor来迭代mount\u size数组并为每个大小创建按钮。这应该起作用：

欢迎
{{biketype.name}
{{mt_size.mount_s}}Zoll

2个按钮用于2个安装？对于每英寸尺寸的“安装尺寸”，一个按钮。因此，一个按钮有26英寸，一个按钮有28英寸，例如，在你的json中看不到28英寸。我相信harleybl下面的答案是正确的。Aakash sry我两次不小心写了26。它应该是一次26和一次28@Dominik很难，也许你不需要每种尺寸的图片标题。然后将

*ngFor=“…”

移动到

标记中below@harleybl非常感谢你。它工作得很好：）@David B.你什么意思？：）以防万一，你只需要两个按钮，但里面有一个figcaption，而不是两个figcaption，每个按钮都在里面。不管这样对你是否有效。