ドロップダウンHTMLテーブル

Question

期待される動作：見出しの

クリックすると、その特定の見出しのためのサブコンテンツを開く必要があります。

現状：すべての見出しの見出しオープンサブコンテンツの

クリックします。

app.component.html

<ul *ngFor="let audience of mockAudiences | keysPipe"> 
    <li (click)="toggleAudienceHeader(audience)" class="audience-type-th"> 
     {{audience.key}} 
    </li> 
    <li> 
     <table *ngIf="showAudience" class="table"> 
      <tbody> 
       <tr *ngFor="let data of audience.value"> 
        <td></td> 
        <td>{{data.name}}</td> 
        <td>{{data.amount}}</td> 
        <td> 
         <input class="select-audience" type="checkbox" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </li> 
</ul> 

app.component.ts

import {Component} from '@angular/core'; 
import {bootstrap} from '@angular/platform-browser-dynamic'; 

@Component({ 
    selector: 'material-app', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent { 
    showAudience: boolean = false; 
    private version: any; 
    audience = { selected: false }; 
    mockAudiences = [ 
     { 
      'In-Market': [ 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' } 
      ] 
     }, 
     { 
      'Lifestyle': [ 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' }, 
       { 'name': 'Automobile Buyers', 'amount': '8392384' } 
      ] 
     } 
    ]; 

    constructor() { 
    } 

    toggleAudienceHeader(audience){ 
    console.log("audience key:: ", audience.key); 
    this.showAudience = !this.showAudience; 
    } 

} 

keys.pipe.ts

import { Injectable, Pipe, PipeTransform } from "@angular/core"; 

@Pipe({name: 'keysPipe'}) 
@Injectable() 
export class KeysPipe implements PipeTransform { 
    transform(array, args:string[]) : any { 
     let keys = []; 
     for (let obj in array) { 
      for (let key in array[obj]){ 
       keys.push({key: key, value: array[obj][key]}); 
      } 
     } 
     console.log("keys:: ", keys); 
     return keys; 
    } 
} 

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {NgModule} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 
import {HttpModule} from '@angular/http'; 
import {AppComponent} from './app.component'; 
import {MaterialModule} from '@angular/material'; 
import { KeysPipe } from './keys.pipe'; 


@NgModule({ 

    imports: [ 
    BrowserModule, 
    CommonModule, 
    HttpModule, 
    MaterialModule, 
    BrowserAnimationsModule 
    ], 

    declarations: [AppComponent, KeysPipe], 
    bootstrap: [AppComponent], 
    providers: [] 
}) 
export class PlunkerAppModule {} 

platformBrowserDynamic().bootstrapModule(PlunkerAppModule); 

Plunker：

http://plnkr.co/edit/U5Jk0sEpeKab4gv6J5nZ?p=info

Answer 1

問題は、複数の "観客" を処理するためのトグル変数を持っているということです。あなたはこのように、クリックされた項目のインデックスを格納する変数を作成することができます。

currIndex: number = -1; 

ここでは、このインデックス操作：テンプレートで、だから、

toggleAudienceHeader(index: number): void { 
    if (this.currIndex === index) { // Clicked on an already open audience 
    this.currIndex = -1; 
    } else { 
    this.currIndex = index; 
    } 
    // this.currIndex = this.currIndex === index ? -1 : index; 
} 

を：

<ul *ngFor="let audience of mockAudiences | keysPipe, let i = index"> 
    <li (click)="toggleAudienceHeader(i)" class="audience-type-th"> 
    {{audience.key}} 
    </li> 
    <li> 
    <table class="table"> 
     <tbody> 
     <tr *ngFor="let data of audience.value"> 
      <ng-container *ngIf="currIndex === i"> 
      <td></td> 
      <td>{{data.name}}</td> 
      <td>{{data.amount}}</td> 
      <td> 
       <input class="select-audience" type="checkbox" /> 
      </td> 
      </ng-container> 
     </tr> 
     </tbody> 
    </table> 
    </li> 
</ul> 

はPLUNKERを二股

更新＃1：

複数のオープンヘッダーの条件を満たすために、ここにはplunkerがあります。