角度导航选项卡不显示选项卡内容

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>