无法在手风琴表行中显示数据

Question

我有一个服务，它以以下格式返回json对象：

{
  "alphabets": [
    {
      [
        {
          "id": "1",
          "type": "vowels",
          "example":"a"
        },
 {
          "id": "2",
          "type": "consonants",
          "example":"b"
        }
      ]
    }
  ]
}

我后来能够成功地将json对象解析到前端（Angular8）上，在前端有如下的手风琴表：

 <tr *ngFor="let alpha of alphabetArray.alphabets" class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
  <td class="expand-button"></td>
  <td>{{alpha.id}}</td>
  <td>{{aplha.type}}</td>

  </tr>
  <tr *ngFor="let alpha of alphabetArray.alphabets" class="hide-table-padding">
  <td></td>
  <td colspan="3">
  <div id="collapseOne" class="collapse in p-3">
    <div class="row">
      <div class="col-3">{{alpha.example}}</div>
    </div>

但是当我运行UI时，将按预期创建2行，但是如果我扩展第一行以查看其示例内容，它将在第二行之后扩展并显示第1行和第2行的内容。我想要'id'和在第1行和第2行以及手风琴展开时显示的“类型”显示示例1从第1行扩展到第一个对象，而示例在第2行扩展后从第二个对象开始。

Answer 1

See this。希望这有助于澄清