角度2 - 、要素を表示し、他を隠す

Question

問題：

Iは4つの要素のアコーディオンは、各要素は、私が最初の要素をクリックして、代わりに表示するとき、表示されるコンテンツをhiddes有します最初の要素の内容を上げると、もう一方の要素も表示されます。

期待される動作：私は最初の要素をクリックして、その要素に属するコンテンツを表示し、hiddingに他のコンテンツを保存しておきたい

。

コード：

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のか、バニラJSではなくので、これを行う方法を知っていればそれはOOPでした私は'this'の使用を全く理解していません。

Answer 1

これらのすべての方法では、thisは、tipではなく、コンポーネント（インスタンスSabiasQueComponent）に属します。

いくつかの解決策がありますが、1つの提案が以下に示されています。

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> 

お知らせ3つの変更："{'tips-list__title--active' : isOpen}""{'tips-list__title--active' : tip.isOpen}"に、(click)="showContent(tip)"に(click)="showContent()"、および[hidden]="!tip.isOpen">に[hidden]="!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()についてその内容示されるtipを受信するように変更されました。 get isOpen()とset isOpen()が削除されました。これはそれぞれtipのプロパティになります。そしてcloseOthers(openGroup)は新しいcloseAllTips()のために削除されました。

Answer 2

角度2で表示と非表示は実際にはお勧めできません。 ngIfを試して、おおよそこのようなことをしてください！ （3）の代わりに隠さ

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

（のngifを使用

（1）インデックスに

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

を追加（2）変更のクリックイベントと

(click)="showContent(i)" 

インデックスを渡します4）チップアレイの長さの配列を作成する

showTips = [false, false, false, false, false....]; 

（5）コンポーネントであなたのショーのコンテンツ機能は、この

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

Answer 3

thisようになりますクラス自体のインスタンスを参照します。意味：

const instance = new SabiasQueComponent() 

をあなたはthisにクラスで参照するたびに、あなたは、インスタンスのプロパティを参照しています。例えば（コードは無効ですが、ちょうどプレゼンテーション用）：

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

あなたがshowContentメソッドを呼び出すたびに、値_isOpenがインスタンスに設定されているので、それはだ - のように - すべてのパネルへのグローバル、作るましたそれらは同時に開く。代わりに、それぞれのパネルにisOpenというプロパティを設定し、各パネルの状態を保存します。 closeOthersのパネルを閉じるときには既にそれを行います。固定する必要のある部分はオープニングロジックです。

解決する必要がある点が3つあります。 1.不要なので、インスタンスの_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. 
} 

は今、あなただけの特定の先端のisOpen値を参照して、テンプレートの開口方法に先端のインデックスを渡す必要があります：

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

これは当初の意図通りに機能するはずです。