Angular 角度2-显示一个元素并隐藏其他元素，

问题：

我有一个由4个元素组成的手风琴，每个元素隐藏要显示的内容，当我单击第一个元素时，它显示的不是第一个元素的内容，而是其他3个元素

预期行为：

我想单击第一个元素，然后显示属于该元素的内容，并继续隐藏其他内容

代码：

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序sabias que”，
templateUrl:'./sabias que.component.html'，
样式URL:['./sabias que.component.scss']
})
导出类SabiasQueComponent实现OnInit{
private _isOpen:boolean=false；
私人提示：数组=[
{
标题：“标题1”，
内容：“要显示的内容”
},
{
标题：“标题1”，
内容：“要显示的内容”
},
{
标题：“标题1”，
内容：“要显示的内容”
},
{
标题：“标题1”，
内容：“要显示的内容”
}
]
closeOthers（openGroup）：无效{
this.tips.forEach（（tip）=>{
如果（提示！==openGroup）{
tip.isOpen=假；
}
});
}
设置等参线（值：布尔值）{
调试器；
这是一个数值；
如果（值）{
这个,其他(这个),；
}
}
获取isOpen（）{
把这个还给我；
}
构造函数（）{}
恩戈尼尼特（）{
}
showContent（）：无效{
this.isOpen=！this.isOpen；
}
}

HTML:

{{tip.heading}

{{tip.content}

---

如果有人提供并回答，我将非常感谢您的代码或概念解释，我知道如何使用jQuery或vanilla JS实现这一点，但由于它是面向对象的，所以我根本不理解

'this'

的用法。

在Angular 2 show and hide中不再推荐/可用。试试ngIf，大致做一下这样的事情

（1） 添加索引

<li *ngFor="let tip of tips;let i=index">

（3） 使用ngif而不是隐藏

 <p class="tips-list__answer" *ngIf="showTips[i]">

（5） 在您的组件中，show content函数如下

showContent(index){
    for(i=0;i < this.tips.length; i++){
       this.showTips[i] = false; 
    } 
    this.showTips[index] = true;
}

showContent（索引）{
对于（i=0；i

此

引用类本身的实例。意思是：

const instance = new SabiasQueComponent()

无论何时在类中引用

this

，都是引用实例的属性。例如（代码无效，但仅用于演示）：

无论何时调用

showContent

方法，都会在实例上设置值

\u isOpen

，因此在某种程度上，它对所有面板都是全局的，从而使它们同时打开。相反，您希望在每个面板上都有一个

isOpen

属性，该属性将存储每个面板的状态。您已经在关闭

关闭其他

中的面板时执行了此操作。需要固定的部分是打开逻辑

您需要解决以下三点： 1.删除实例的

\u isOpen

属性，因为它不是必需的。 2.打开单击的面板，而不仅仅是设置实例的属性。 3.请参阅模板中的正确值

关于第一次和第二次：

export class SabiasQueComponent implements OnInit {
     // Removed _isOpen.

     // Store the open state in panels
     private tips : Array<any> = [
         {
             heading: 'Title 1,
             content: 'content',
             isOpen: false // Stored state.
         },
         // Same for others...
     ]

     // Method needs to know which tab to open, so we're providing the index. Named it "toggleContent" since we're actually toggling, not just showing.
     toggleContent(index: number) {
          this.tips[index].isOpen = !this.tips[index].isOpen
          // After toggling, close other tabs.
          this.closeOthersExcept(index)
     }

     // You pretty much already have this.
     this.closeOthersExcept(index: number) {
         this.tips.forEach((tip, tipIndex) => {
             if (index !== tipIndex) {
                 tip.isOpen = false
             }
         })
     }

     // No other methods / setters are required.
}

---

现在它应该按照您最初的预期工作。

在所有这些方法中，

此

属于组件（SabiasQueComponent的实例），而不是每个

提示

有几种可能的解决方案，一个建议如下所示

模板：

  <ul class="tips-list">
  <li *ngFor="let tip of tips">
    <h3 class="tips-list__title" 
        [ngClass]="{'tips-list__title--active' : tip.isOpen}" (click)="showContent(tip)">
        {{ tip.heading }}    
    </h3>
    <p class="tips-list__answer" [hidden]="!tip.isOpen">
      {{ tip.content }}  
    </p>
  </li>
</ul>

---

在组件代码中，

showContent（）

已更改为现在接收将显示其内容的

提示。已删除
get isOpen（）
和
set isOpen（）
，因为这将是每个
提示的一个属性。而
closeOthers（openGroup）
被删除，取而代之的是新的
closeAllTips（）
棒极了！，非常清楚，我得到了代码，非常感谢。您可能需要阅读以下内容
showContent(index){
    for(i=0;i < this.tips.length; i++){
       this.showTips[i] = false; 
    } 
    this.showTips[index] = true;
}

const instance = new SabiasQueComponent()

this.tips === instance.tips
this._isOpen === instance._isOpen

export class SabiasQueComponent implements OnInit {
     // Removed _isOpen.

     // Store the open state in panels
     private tips : Array<any> = [
         {
             heading: 'Title 1,
             content: 'content',
             isOpen: false // Stored state.
         },
         // Same for others...
     ]

     // Method needs to know which tab to open, so we're providing the index. Named it "toggleContent" since we're actually toggling, not just showing.
     toggleContent(index: number) {
          this.tips[index].isOpen = !this.tips[index].isOpen
          // After toggling, close other tabs.
          this.closeOthersExcept(index)
     }

     // You pretty much already have this.
     this.closeOthersExcept(index: number) {
         this.tips.forEach((tip, tipIndex) => {
             if (index !== tipIndex) {
                 tip.isOpen = false
             }
         })
     }

     // No other methods / setters are required.
}

<ul class="tips-list">
  <!-- Get the index value from the ngFor. -->
  <li *ngFor="let tip of tips; let index = index">
    <!-- 1. Refer to the tip.isOpen instead of the "global" isOpen when adding a class. -->
    <!-- 2. Pass the index to the opening method. -->
    <h3 class="tips-list__title" 
        [ngClass]="{'tips-list__title--active' : tip.isOpen (click)="showContent(index)">
        {{ tip.heading }}    
    </h3>
    <p class="tips-list__answer" [hidden]="!tip.isOpen">
      {{ tip.content }}  
    </p>
  </li>
</ul>

  <ul class="tips-list">
  <li *ngFor="let tip of tips">
    <h3 class="tips-list__title" 
        [ngClass]="{'tips-list__title--active' : tip.isOpen}" (click)="showContent(tip)">
        {{ tip.heading }}    
    </h3>
    <p class="tips-list__answer" [hidden]="!tip.isOpen">
      {{ tip.content }}  
    </p>
  </li>
</ul>

export class SabiasQueComponent implements OnInit {

  private _isOpen : boolean = false;
  private tips : Array<any> = [
    // all the same
  ]

  closeAllTips(): void {
    this.tips.forEach((tip) => {
      tip.isOpen = false;
    });
  }

  showContent(tip) {
    if (!tip.isOpen) {
      this.closeAllTips();
    }
    tip.isOpen = !tip.isOpen;
  }

  constructor() { }

  ngOnInit() {
  }

}