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

Question

Здесь выполняется цикл kpiName и также выполняются внутренние циклы subRegion.
В результате 4 деления class="col-xs-2" создаются и внутри него создаются два div(интерактивные div внутри класса фильтра) с динамическим Id как id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" который onclick вызывает некоторую функцию.

Требование при соответствующем id="filteredTabSubRegion{{index}}",id="filteredTabProductLine{{index}}" нажал показать и скрыть id="filteredDataSubRegion{{index}}" а также id="filteredDataProductLine{{index}}" из соответствующих 4 div(a, b, c, d).

app.component.ts

kpi = [a, b, c, d];
subRegion = ['China', 'India', 'Japan', 'Korea', 'SEATH'];
productLine = ['6A', '7T', '9T', 'UV', 'BA'];

    loadFilterData(index,type){
    console.log(index);
//---------------------angular2 implementation???------------------
     if (type === 'subregion') {     
              // $('#filteredDataSubRegion' + index).show();  
              // $('#filteredDataProductLine' + index).hide();
          } else {
              // $('#filteredDataSubRegion' + index).hide();
              // $('#ffilteredDataProductLine' + index).show();
          }
    }

app.component.html

<div class="col-xs-2 " *ngFor="let kpi of kpiName;let index=index;">
  <div class="col-xs-12 rmpm bottomSectionKpis">
    <div class="col-xs-12 rmpm filter">
      <div class="col-xs-6 rmpm" id="filteredTabSubRegion{{index}}" (click)="loadFilterData(index,'subregion')" [ngClass]="{'activex': act}">Sub Region</div>
      <div class="col-xs-6 rmpm" id="filteredTabProductLine{{index}}" (click)="loadFilterData(index,'productline')" [ngClass]="{'activex': activ}">Product Line</div>
    </div>
    <div class="col-xs-12 rmpm filterTable">
      <div class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}" style="display:block">
        <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
          <div class="col-xs-2 rmpm filteredDataIcon">
            <i class="fa fa-circle" aria-hidden="true"></i>
          </div>
          <div class=" col-xs-7 rmpm filteredDataName">{{subRegion[k]}}</div>
          <div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
        </div>
      </div>
      <div class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}" style="display:none">
        <div class="col-xs-12 rmpm filteredDataRow" *ngFor="let subDta of subRegion;let k = index;">
          <div class="col-xs-2 rmpm filteredDataIcon">
            <i class="fa fa-circle" aria-hidden="true"></i>
          </div>
          <div class=" col-xs-7 rmpm filteredDataName">{{productLine[k]}}</div>
          <div class="col-xs-3 rmpm filteredDataShift text-center">Shift</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Хорошо, так как smnbbrv предлагает что-то вроде:

Файл компонента:

displayDiv: boolean = false;
loadFilterData(index: number, div: string){
   this.displayDiv = !this.displayDiv;
}

HTML-файл:

<div *ngIf="displayDiv" class="col-xs-12 rmpm " id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="!displayDiv" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">
...
/<div>

Вам это поможет?

Число рейнольдса Если я вас хорошо понимаю, у вас есть 4 дел:

A
  A1
    A11 (click)-> show only A21 
    A12 (click)-> show only A22
  A2
    A21
    A22
B (...)
C (...)
D (...)

Это правильно?

Если это так, у вас есть несколько возможностей для управления вашими дисплеями. Например, вы можете использовать 2 переменные: displayBlock, displaySubBlock.

displayBlock: boolean = false;
displaySubBlock: boolean = false;

loadFilterData(index: number, div: string){
   this.displayBlock = index;
   this.displaySubBlock = !this.displaySubBlock;
}

<div *ngIf="displayBlock === i && displaySubBlock" class="col-xs-12 rmpm "id="filteredDataSubRegion{{index}}">
...
</div>
<div *ngIf="displayBlock === i && !displaySubBlock" class="col-xs-12 rmpm " id="filteredDataProductLine{{index}}">
...
</div>

Код не проверен, просто для идеи.