Angular 6显示或隐藏列表项

Posted 2023-03-13

【中文标题】Angular 6显示或隐藏列表项

【英文标题】：Angular 6 show or hide list items

【发布时间】：2019-01-29 22:26:51

【问题描述】：

我有显示列表项的简单 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;
  

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

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

【问题讨论】：

这是因为您在所有这些上的 ngIf 中使用了相同的布尔值。如果您为每个 ngIf 设置单独的布尔值并将某些内容传递给 toggleCard 以说明正在按下哪个，那么您可以轻松地切换每个布尔值并在切换时隐藏其他布尔值。

@CodeMonkey 对这个东西很陌生，我如何使用 switch 来做到这一点？或者如果可以请提供一些类似的教程

您可以使用 Augustin R 的答案。这接近你想要的。

是的，这正是我想要的，

【参考方案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

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

【讨论】：

正是我想要的，非常感谢