如何在 Angular 7 中动态显示隐藏？

Question

>on click an English button it shows its corresponding div at the same time if I clicked on another button then it shows its div but the previous one not closed. I want that on click English it shows the div and on again click it close.
>Note that makes it dynamically because I don't know how many lang are there.
>make sure you don't make it for static data.

*在我的 HTML 中 *

 <div *ngFor="let lang of langList;let index = index" >
          <div class="engbutton">
              <button class="englishButton" (click)="onclickEnglishDiv(lang,index)">{{ lang }}</button>
              <div *ngIf="visibleIndex === index" class="knowEnglish">
                <div>
                  <div *ngFor="let data of filteredLangList" class="engDivObj">{{data.name}}</div>
                </div>
              </div>
            </div>
      </div>

在我的TS

 onclickEnglishDiv(clickLang,index){  
    if (this.visibleIndex !== index) {
      this.visibleIndex = index;
    }     
  }

• 单击任何 div 它会打开它。但是单击下一个它会打开下一个并关闭第一个。 * 我想要的是 *

I want that on click first button it opens its div, 
on click second button it opens its div .but, doesn't close the first one. The first one is closed when the first button only clicked.
- make it dynamically like when new data come it works with the flow.

这是我的示例https://stackblitz.com/edit/angular-showhide-088?file=src%2Fapp%2Fsho-hide%2Fsho-hide.component.html

在这里你可以找到它的 jquery 版本： https ://www.bootply.com/90JfjI2Q7n 我在角度 7 中需要的上述功能。动态类型，而不是硬核类型，比如为每个 div 定义布尔值。

Answer 1

一种解决方案可能不是存储可见索引，而是存储可见索引，例如：

<div class="box">
  <div class="container">
      <div *ngFor="let lang of langList;let index = index" >
          <div class="engbutton">
              <button class="englishButton" (click)="onclickEnglishDiv(lang, index)">{{ lang }}</button>
              <div *ngIf="visibleIndices.has(index)" class="knowEnglish">
                <div>
                  <div *ngFor="let data of studentList | filterLanguages:lang" class="engDivObj">{{data.name}}</div>
                </div>
              </div>
          </div>
      </div>
  </div>
</div>

...
export class ShoHideComponent implements OnInit {
  visibleIndices = new Set<number>();

  ...

  onclickEnglishDiv(clickLang, index): void {
    if (!this.visibleIndices.delete(index)) {
      this.visibleIndices.add(index);
    }
  }
}

您可能还注意到我将语言过滤器逻辑移到了filterLanguages管道中，因为每个元素都应该有自己的过滤语言副本，否则所有元素都会显示相同的项目。 堆栈闪电链接

---

另一种解决方案可能是为按钮创建一个单独的组件，例如：

<!-- sho-hide.component.html -->
<div class="box">
  <div class="container">
      <div *ngFor="let lang of langList;let index = index" >
          <app-lng-button [lang]="lang" [languages]="studentList | filterLanguages:lang"></app-lng-button>
      </div>
  </div>
</div>

// lng-button.component.ts
@Component({
  selector: 'app-lng-button',
  templateUrl: './lng-button.component.html'
})
export class LngButtonComponent {
  @Input()
  lang!: string;

  @Input()
  languages: string[] = []

  open = false;
}

<!-- lng-button.component.html -->
<div class="engbutton">
  <button class="englishButton" (click)="open = !open">{{ lang }}</button>
  <div *ngIf="open" class="knowEnglish">
    <div>
      <div *ngFor="let data of languages" class="engDivObj">{{data.name}}</div>
    </div>
  </div>
</div>

堆栈闪电链接

Answer 2

如果我正确理解了您要做什么，就需要像这样重置您的visibleIndex的当前值

 onclickEnglishDiv(clickLang,index){  
    if (this.visibleIndex !== index) {
      this.visibleIndex = index;
    } else {
      this.visibleIndex = null;     
    }     
 }