角度导航标签不显示标签内容

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>