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

我正在使用导航选项卡和选项卡内容在Angular中创建一个多页表单。我可以在选项卡之间切换，但内容不会显示在任何选项卡中。在我将淡入淡出添加到选项卡窗格之前，步骤1的内容显示在每个步骤中，因此淡入淡出可能是问题之一，但不是我认为的唯一问题。。。下面是我的代码，任何帮助都是感激的

我从这个网站获得了html：

如果有可能在同一个url中创建这些选项卡和指向它们的链接（所以不要更改），那将是一件令人惊奇的事情。因此，如果有人知道如何做到这一点（如果可能的话），那么你就太棒了

全名：
标签：
电邮：
图片的URL:
电话号码：
网址：
总结：
位置
地址:
城市：
邮政编码：
国家代码：
地区：
档案{{i+1}}：
网络：
用户名：
网址：


删除配置文件{{i+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>

表1
表2
表3

奇怪的是，我直接复制了这段代码，但它仍然不起作用……我找到了另一个完全符合我需要的解决方案，不过还是要感谢您给我带来的麻烦！对于那些好奇的人：我用了这个：