使用Bootstrap4和Angular渲染导航选项卡

我希望每个配方及其变体都有一页可编辑

此时，内容将呈现在下面（请参见=>单击“Erstelle Variant”）

就是这样

我在这里定向

整个概述：

下面是相关的代码片段：

    <div class="tab-content" id="BarRecipe_{{Helper_ReplaceId(selectedRecipe.id)}}">

      <div class="tab-pane container active"  *ngFor="let all of [selectedRecipe].concat(selectedRecipe.relatedRecipes); let i = index" id="menu_{{Helper_ReplaceId(all.id)}}">
        <br />
        {{all.id}}

        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn btn-outline-success btn-block" (click)="onUpdateRecipe()" [disabled]="!f.valid">Speicher Variante</button>
          </div>
          <div class="col-md-6">
            <button type="button" class="btn btn-outline-danger btn-block " (click)="onDeleteRecipe()">Lösche Variante</button>
          </div>
        </div>
        <br />
        <br />

      </div>


    </div>

{{all.id}
斯派克方差
Lösche Variante

---

我该怎么办？

无法得到你想要的。您能再解释一下吗？当然，通常引导面板应该是这样的：对于您单击的每个选项卡，您都会得到一个结果。当我添加变量时，每个选项卡都有许多变量，当我单击时，它是不分开的。您可以使用ng引导和angular引导组件。看看这个