Angular 6显示或隐藏列表项

Question

我有显示列表项的简单 Angular 应用程序，我希望在单击第一个列表项时显示列表描述（卡片），当单击第二个列表项并显示描述时，应隐藏第一个列表描述（卡片），

这里是 stackblitz 供参考： https://stackblitz.com/edit/bootstrap-nabar-cidoez?file=src/app/app.component.html

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> 

组件.ts

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;
  }
}

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

我的代码中缺少什么？任何帮助将不胜感激，谢谢

Answer 1

首先，我更喜欢使用带有布尔字段的领导者数组：

inspiringLeaders = [
    {
      name: 'Inspiring leaders 1',
      text: '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.',
      shown: false
    },
    {
      name: 'Inspiring leaders 2',
      text: '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.',
      shown: false
    },
    {
      name: 'Inspiring leaders 3',
      text: '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.',
      shown: false
    }
  ];

toggleCard(leader: { name: string, text: string, shown: boolean }) {
    this.inspiringLeaders.map((l) => {
      if (l.name === leader.name) {
        l.shown = !l.shown;
      } else {
        l.shown = false;
      }
    });
}

并在 .html 中使用 ngFor 循环：

<div class="why-choose-us__description">
    <ul class="why-choose-us__list-top">
        <li class="why-choose-us__leader" (click)="toggleCard(leader)" style="background-image: url('/assets/images/solidne-fundamenty.png')"
         *ngFor="let leader of inspiringLeaders">
            <h4>{{leader.name}}</h4>
            <div class="why-choose-us__card card" *ngIf="leader.shown">
                <p>{{leader.text}}</p>
                <div class="close-icon"></div>
            </div>
        </li>
    </ul>
</div>

更新stackblitz

编辑
一次只显示一个文本。