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

Question

问题:

我有一个包含 4 个元素的 Accordion ，每个元素都隐藏了要显示的内容，当我单击第一个元素时，它没有显示第一个元素的内容，而是显示了其他 3 个元素。

预期行为:

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

代码:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sabias-que',
  templateUrl: './sabias-que.component.html',
  styleUrls: ['./sabias-que.component.scss']
})
export class SabiasQueComponent implements OnInit {

  private _isOpen : boolean = false;
  private tips : Array<any> = [
    {
      heading: 'Title 1',
      content: 'Content to be displayed'
    },
    {
      heading: 'Title 1',
      content: 'Content to be displayed'
    },
    {
      heading: 'Title 1',
      content: 'Content to be displayed'
    },
    {
      heading: 'Title 1',
      content: 'Content to be displayed'
    }
  ]

  closeOthers(openGroup): void {
    this.tips.forEach((tip) => {
      if (tip !== openGroup) {
        tip.isOpen = false;
      }
    });
  }

  set isOpen(value: boolean) {
    debugger;
    this._isOpen = value;
    if (value) {
      this.closeOthers(this);
    }
  }

  get isOpen() {
    return this._isOpen;
  }



  constructor() { }

  ngOnInit() {
  }

  showContent(): void {
    this.isOpen = !this.isOpen;
  }

}

HTML:

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

如果有人提供并回答，我将不胜感激代码或概念解释，我知道如何使用 jQuery 或 vanilla JS 执行此操作，但由于它是 OOP，我不明白 'this' 的用法完全没有。

Answer 1

在所有这些方法中，this 属于组件(SabiasQueComponent 的实例)，而不属于每个tip。

有几种可能的解决方案，下面显示了一种建议。

Check demo plunker here

模板:

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

注意三个变化:"{'tips-list__title--active' : isOpen}" 到 "{'tips-list__title--active' : tip.isOpen}"、(click)="showContent()" 到 (click)="showContent(tip)" 和 [hidden]="!isOpen"> 到 [hidden]="!tip.isOpen">。基本上，我们现在从每个提示中获取属性，而不是从组件中获取。

组件:

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() {
  }

}

在组件代码中，showContent() 已更改为现在接收将显示其内容的提示。 get isOpen() 和 set isOpen() 已被删除，因为这将成为每个 tip 的属性。并且 closeOthers(openGroup) 被移除以支持新的 closeAllTips()。