角度導航標簽不顯示標簽內容

Question

我正在使用導航標簽和標簽內容在 Angular 中制作一個多頁表單。 我可以在選項卡之間切換，但內容未顯示在任何選項卡中。 在我將淡入淡出添加到選項卡窗格之前，每一步都顯示了第 1 步的內容，因此淡入淡出可能是問題之一，但不是我認為的唯一問題...下面是我的代碼，任何幫助是贊賞！

我從這個網站得到了 html： https : //getbootstrap.com/docs/4.4/components/navs/#tabs

如果有可能在同一個 URL 中執行這些選項卡和指向它們的鏈接（所以不要更改它），那將是令人驚奇的，所以如果有人知道如何做到這一點（如果可能的話），那么你太棒了！

 <nav> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="step1" data-toggle="tab" href="infotemplate/#step1" role="tab" aria-controls="step1" aria-selected="true">Step 1</a> </li> <li class="nav-item"> <a class="nav-link" id="step2" data-toggle="tab" href="infotemplate/#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a> </li> </ul> </nav> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" role="tabpanel" id="step1" aria-labelledby="step1"> <form [formGroup]="basicsform"> <div> <div class="required-field">Full name:</div> <input type="text" formControlName="name" placeholder="Full name"> </div> <div> Label: <input type="text" formControlName="label" placeholder="Label"> </div> <div> <div class="required-field">E-mail:</div> <input type="email" formControlName="email" placeholder="E-mail"> </div> <div> URL to picture: <input type="url" formControlName="picture" placeholder="Picture URL"> </div> <div> <div class="required-field">Phone number:</div> <input type="text" formControlName="phone" placeholder="Phone number"> </div> <div> URL to website: <input type="url" formControlName="website" placeholder="Website URL"> </div> <div> Summary: <input type="text" formControlName="summary" placeholder="Summary"> </div> <div formGroupName="location"> <h6>Location</h6> <div> <div class="required-field">Address:</div> <input type="text" formControlName="address" placeholder="Address"> </div> <div> <div class="required-field">City:</div> <input type="text" formControlName="city" placeholder="City"> </div> <div> <div class="required-field">Postal Code:</div> <input type="text" formControlName="postalCode" placeholder="Postal code"> </div> <div> <div class="required-field">Country code:</div> <input type="text" formControlName="countryCode" placeholder="Country code"> </div> <div> Region: <input type="text" formControlName="region" placeholder="Region"> </div> </div> </form> </div> <div class="tab-pane fade" role="tabpanel" id="step2" aria-labelledby="step2"> <form [formGroup]="basicsform"> <div formArrayName="profiles" *ngFor="let profile of basicsform.get('profiles').controls; let i = index;"> <div [formGroupName]="i"> <em><b>Profile {{i + 1}}:</b></em> <div class="required-field">Network:</div> <input type="text" formControlName="network" placeholder="Network"> <div class="required-field">Username:</div> <input type="text" formControlName="username" placeholder="Username"> <div class="required-field">URL:</div> <input type="text" formControlName="url" placeholder="URL"><br> <button (click)="deleteProfile(i)">Delete Profile {{i+1}}</button><br> </div><br><br> </div><br> <div><button (click)="addProfile()" [disabled]="basicsform.get('profiles').invalid">Add profile</button></div><br> </form> </div>

Answer 1

這是工作代碼！ 簽入您的申請。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">tab 1</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">tab 2</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">tab 3</div>
</div>