Как переключать два деления при нажатии в цикле в angular4

Question

Это ссылка на вопрос о том, как показать / скрыть динамический идентификатор div в angular2.

Я подготовил поршень, который покажет проблему, с которой я сталкиваюсь? здесь я хочу переключить btn1 и btn2 отдельно в 4 полях. Требование заключается в том, что в окне box1 btn1 нажимается, 'subRegion' должен показать & 'productLine' должен спрятаться; когда btn2 нажата,'productLine' должен показать и 'subRegion' должен спрятаться. Аналогично среди box2,box3,box4. Здесь, щелкнув btn2 из box1(один из 4 блоков), вы увидите содержимое каждого блока. Как это исправить?

Вот ссылка на плункер, 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 как логическое значение. Если вы рассматриваете его как число и сравниваете его с индексом, тогда он будет делать то, что вам нужно.