Angular 6显示或隐藏列表项

Question

I have simple angular app which displays list items, I want when first list item is clicked list description(card) is displayed , when second list item is clicked and description is displayed the first list description(card) should be hidden ,

Here is stackblitz for reference: 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> 

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

Now when I click one of my list all card descriptions from other list also is displayed .

what am I missing in my codes? any help will be apreciated, thanks

Answer 1

First I will prefer to use an array of leaders, with a boolean field:

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

and use a ngFor loop in the .html :

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

Updated stackblitz

EDIT
Show only one text at a time.