角导航-标签不显示选项卡内容

Question

我正在用导航标签和标签内容在角度上做一个多页的表格。我可以在选项卡之间切换，但内容没有显示在任何选项卡中。在我将淡出添加到标签窗格之前，步骤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>