Javascript 下拉式HTML表格

预期行为：

单击标题应打开该特定标题的子内容

当前状态：

单击标题打开所有标题的子内容

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>

键.pipe.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;
    }

}

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

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

main.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;
    }

}

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

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:

---

问题在于您有一个切换变量来处理多个“受众”。您可以创建一个变量来存储单击项的索引，如下所示：

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>

{{观众.钥匙}


{{data.name}
{{data.amount}

分叉

更新#1:

---

以下是满足多个打开标题条件的方法。

谢谢。这和我想要的非常接近。现在的问题是，如果我在“入市”标题已经打开时单击（例如：“生活方式”），则“入市”标题将关闭。有没有办法先打开标题1，然后再打开标题2而不关闭标题1？非常感谢。这正是我所需要的。：）