Javascript 显示或隐藏列表项

我有一个简单的angular应用程序，它显示列表项，我想当单击第一个列表项时显示列表描述（卡片），当单击第二个列表项并显示描述时，第一个列表描述（卡片）应该隐藏

以下是stackblitz供参考：

html:

<div class="why-choose-us__description">
      <ul class="why-choose-us__list-top">
        <li class="why-choose-us__leader" 
        (click)="toggleCard()"
        style="background-image: url('/assets/images/solidne-fundamenty.png')">
          <h4>Inspiring Leaders1</h4>
          <div class="why-choose-us__card card" *ngIf="showCard">
            <p>Thanks to belonging to an international organization, which operates since 1988 and has a huge knowledge base,
              ASTEK Poland enjoys its stable position on the market.</p>
            <div class="close-icon"></div>
          </div>
        </li>
          <li class="why-choose-us__leader" 
        (click)="toggleCard()"
        style="background-image: url('/assets/images/solidne-fundamenty.png')">
          <h4>Inspiring Leaders2</h4>
          <div class="why-choose-us__card card" *ngIf="showCard">
            <p>Thanks to belonging to an international organization, which operates since 1988 and has a huge knowledge base,
              ASTEK Poland enjoys its stable position on the market.</p>
            <div class="close-icon"></div>
          </div>
        </li>
          <li class="why-choose-us__leader" 
        (click)="toggleCard()"
        style="background-image: url('/assets/images/solidne-fundamenty.png')">
          <h4>Inspiring Leaders3</h4>
          <div class="why-choose-us__card card" *ngIf="showCard">
            <p>Thanks to belonging to an international organization, which operates since 1988 and has a huge knowledge base,
              ASTEK Poland enjoys its stable position on the market.</p>
            <div class="close-icon"></div>
          </div>
        </li>


      </ul>
 </div> 

现在，当我单击其中一个列表时，也会显示其他列表中的所有卡片描述

---

我的代码中缺少了什么？非常感谢您的帮助。首先，我更喜欢使用带布尔字段的前导数组：

inspiringLeaders=[
{
名称：“励志领袖1”，
正文：“由于加入了一个国际组织，该组织自1988年开始运作，拥有庞大的知识基础，ASTEK波兰公司在市场上享有稳定的地位。”，
显示：错误
},
{
名称：“励志领袖2”，
正文：“由于加入了一个国际组织，该组织自1988年开始运作，拥有庞大的知识基础，ASTEK波兰公司在市场上享有稳定的地位。”，
显示：错误
},
{
名称：“励志领袖3”，
正文：“由于加入了一个国际组织，该组织自1988年开始运作，拥有庞大的知识基础，ASTEK波兰公司在市场上享有稳定的地位。”，
显示：错误
}
];
切换卡（引线：{name:string，text:string，显示：boolean}）{
this.inspiringLeaders.map（（l）=>{
if（l.name==leader.name）{
l、 所示=！l.所示；
}否则{
l、 显示=假；
}
});
}

并在.html中使用

ngFor

循环：

{{leader.name}
{{leader.text}

更新

编辑

---

一次只显示一个文本。

这是因为您在ngIf中对所有文本使用相同的布尔值。如果您为每个ngIf设置了单独的布尔值，并将某个值传递给toggleCard以说明按下了哪一个，那么您可以轻松地切换每个值，并在toggle上隐藏其他值。@CodeMonkey我对这个东西不熟悉，我如何使用开关来实现这一点？或者请提供一些类似的教程，如果你可以你可以使用奥古斯丁的答案。这很接近你想要的。是的，这正是我想要的，当然是我想要的，非常感谢

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    showCard = false;

  toggleCard() {
    this.showCard = !this.showCard;
  }
}