如何在angular4中的迴路中單擊時切換兩個div

Question

這是對問題how to show/hide dynamic id of div's in angular2提及的問題的參考。

我準備好了一個可以顯示我所面臨的問題的重拳嗎？ 在這裏，我想分別在4個框中切換btn1和btn2。 要求是在box1中，btn1被點擊，'subRegion'應該顯示& 'productLine'應該隱藏;當點擊btn2時，'productLine'應該顯示並且'subRegion'應該隱藏。同樣，在box2，box3，box4中。 在這裏，點擊box1中的btn2（4個框中的一個）正在每個框中顯示內容。如何解決這個問題？

這裏是plunker鏈接，https://plnkr.co/edit/E3ykbvXIPtQwVqe9cnQA?p=preview

代碼： -

@Component({ 
    selector: 'my-app', 
    template: ` 
<div class="col-xs-3 rmpm" *ngFor="let kpi of kpiName;let index=index;"> 
<div class="col-xs-12 rmpm" style="height:80px;border:1px solid;width:70px;padding:0px;margin:0px;">A</div> 
<div class="col-xs-12 rmpm" style="border:1px solid;width:70px;margin-top:10px;padding:0px;margin:0px;"> 

    <div class="col-xs-12 rmpm" style="border:1px solid;padding:0px;margin:0px;"> 

    <!--btn 1 should be by default active and have blue color --> 

    <div class="col-xs-6 rmpm" id="btn1{{index}}" (click)="showsubid(index,'btn1')" style="padding:0px;margin:0px;border-right:1px solid;">btn1</div> 
    <div class="col-xs-6 rmpm" id="btn2{{index}}" (click)="showproid(index,'btn2')" style="padding:0px;margin:0px;">btn2</div> 
    </div> 

<!--By default will be displayed when btn1 is active,this will show when btn1 is clicked and hide when btn2 is clicked --> 

    <div class="col-xs-12" id="subid{{index}}" style="padding:0px;margin:0px;" > 
    <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;" style="padding:0px;margin:0px;"> 
    <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{subRegion[k]}}</div> 
</div> 
</div> 

<!--this will show when btn2 is clicked and hide when btn1 is clicked --> 

    <div class="col-xs-12" id="proid{{index}}" style="padding:0px;margin:0px;" *ngIf="pro == 0" > 
    <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of productLine;let k = index;" style="padding:0px;margin:0px;" > 
    <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{productLine[k]}}</div> 
</div> 
    </div> 
</div> 
</div> 
    `, 
}) 
export class App { 
    kpiName = ['s', 'TO ','d','e']; 
    subRegion = ['Ch', 'Ia', 'Ja', 'Ke', 'SE']; 
    productLine = ['6A', '7T', '9T', 'UV', 'BA']; 
pro: any; 
    constructor() { 

    } 

showsubid(index,btnid){ 
    alert(index) 
    alert(btnid+index) 
} 
showproid(index){ 
    alert(index) 
    // alert(id+index) 
    this.pro = index; 
} 
} 

Answer 1

按照您的要求。點擊按鈕後，應顯示該部分的具體內容。我更新了代碼：https://plnkr.co/edit/TEbI45K2TZkRYd84jYft?p=preview

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
<div class="col-xs-3 rmpm" *ngFor="let kpi of kpiName;let index=index;"> 
<div class="col-xs-12 rmpm" style="height:80px;border:1px solid;width:70px;padding:0px;margin:0px;">A</div> 
<div class="col-xs-12 rmpm" style="border:1px solid;width:70px;margin-top:10px;padding:0px;margin:0px;"> 

    <div class="col-xs-12 rmpm" style="border:1px solid;padding:0px;margin:0px;"> 

    <!--btn 1 should be by default active and have blue color --> 

    <div class="col-xs-6 rmpm" id="btn1{{index}}" (click)="showsubid(index,'btn1')" style="padding:0px;margin:0px;border-right:1px solid;">btn1</div> 
    <div class="col-xs-6 rmpm" id="btn2{{index}}" (click)="showproid(index,'btn2')" style="padding:0px;margin:0px;">btn2</div> 
    </div> 

<!--By default will be displayed when btn1 is active,this will show when btn1 is clicked and hide when btn2 is clicked --> 

    <div class="col-xs-12" id="subid{{index}}" style="padding:0px;margin:0px;" > 
    <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;" style="padding:0px;margin:0px;"> 
    <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData(index ,kpiName[index],subRegion[k])' style="padding:0px;margin:0px;border-top:1px solid">{{subRegion[k]}}</div> 
</div> 
</div> 

<!--this will show when btn2 is clicked and hide when btn1 is clicked --> 

    <div class="col-xs-12" id="proid{{index}}" style="padding:0px;margin:0px;" *ngIf="pro === index" > 
    <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of productLine;let k = index;" style="padding:0px;margin:0px;" > 
    <div class=" col-xs-12 rmpm filteredDataName " (click)='loadSubRegionData()' style="padding:0px;margin:0px;border-top:1px solid">{{productLine[k]}}</div> 
</div> 
    </div> 
</div> 
</div> 
    `, 
}) 
export class App { 
    kpiName = ['s', 'TO ','d','e']; 
    subRegion = ['Ch', 'Ia', 'Ja', 'Ke', 'SE']; 
    productLine = ['6A', '7T', '9T', 'UV', 'BA']; 
pro: number; 
    constructor() { 
this.pro= []; 
    } 
loadSubRegionData(index,kpi,subreg){ 
    alert(index); 
    alert(subreg); 
} 
showsubid(index,btnid){ 
    alert(index) 
    alert(btnid+index) 
} 
showproid(index){ 
    alert(index) 
    // alert(id+index) 
    this.pro = index; 
} 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

將變量pro視爲布爾值時出現了一個小錯誤。如果你認爲它是一個數字，並將其與索引進行比較，那麼它會做你所需要的。