Показать / скрыть компонент на основе события клика определенного заголовка внутри таблицы на основе заголовка столбца моей таблицы в Angular 9

Question

Я работаю в приложении angular, где я работаю над приложением COVID 19.

Здесь у меня есть 2 компонента, где компонент A содержит список всех состояний, а компонент B перечисляет все районы определенного штата. .

Вот моя блиц-ссылка стека блиц-ссылка стека

Я хочу, чтобы мой вывод был таким Ожидаемый вывод

Я получил ссылка здесь из переполнения стека ссылка переполнения стека

Теперь я отобразил все данные компонента в табличном формате, и когда я щелкаю по этому состоянию, он должен загрузить все данные по нажатому состоянию и когда Я снова нажимаю на это состояние, оно должно закрыться. Также, если я нажимаю на другие списки состояний всех округов, это состояние должно отображаться

Но я не знаю, куда поместить мой <app-componentB></app-componentB>, потому что, если поместить его внутрь для l oop, и если я попытаюсь чтобы отобразить список для одного штата, он отображает один и тот же список округов во всех штатах

Вот фрагмент моего кода

componentA. html

  <tbody *ngFor="let data of statewisedata;let i=index">
                <span class="dropdown rotateDownRight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>

                <tr class="state">
                    <td (click)="OngetState(data.state)" style="font-weight: 600;">{{data.state}}</td>



                    <td style="color: inherit;">{{data.confirmed}}

                        <span *ngIf='DailystateStatus[i]?.confirmed !==0 || DailystateStatus[i]?.confirmed < 0 ;' class="deltas" style="color: rgb(255, 7, 58);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>
                                </svg>    {{DailystateStatus[i]?.confirmed}}</span>

                    </td>


                    <td style="color: inherit;">{{data.active}}</td>
                    <td style="color: inherit;">{{data.recovered}}</td>
                    <td style="color: inherit;">{{data.deaths}}</td>

                </tr>


 <app-district *ngIf="!showDistrict"></app-district>

        </tbody>

componentA.ts

 showDistrict=true
  OngetState(state) {
    this.cs.getState(state)
    this.cs.getDataDistrictWise(state)
    this.showDistrict=!this.showDistrict
  }

Answer 1

Я надеюсь, что вы можете попробовать что-то из ссылки, которую вы упомянули

    <tr>

     <td (click)="OngetState(data.state,i)" style="font-weight: 600;">{{data.state}}</td>

    <td>...</td>
    <td>...</td>
    <td>...</td>
    </tr>

<app-district *ngIf="selectedIndex == i && showDistrict==true"></app-district>

component.ts

selectedIndex = -1;
  showDistrict:boolean=false

OngetState(state,i) {
    console.log(this.showDistrict)
    this.cs.getState(state)
    this.cs.getDataDistrictWise(state)
    this.selectedIndex = i;   
    this.showDistrict=!this.showDistrict
    console.log(this.showDistrict)
  }

Answer 2

you need to do a few changes and your code is

**componentA.html**

            <tbody *ngFor="let data of statewisedata;let i=index">
                <span class="dropdown rotateDownRight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>

                <tr class="state">
                    <td (click)="OngetState(data.state); showHideData(data)" style="font-weight: 600;">{{data.state}}</td>



                    <td style="color: inherit;">{{data.confirmed}}

                        <span *ngIf='DailystateStatus[i]?.confirmed !==0 || DailystateStatus[i]?.confirmed < 0 ;' class="deltas" style="color: rgb(255, 7, 58);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline>
                                </svg>    {{DailystateStatus[i]?.confirmed}}</span>

                    </td>


                    <td style="color: inherit;">{{data.active}}</td>
                    <td style="color: inherit;">{{data.recovered}}</td>
                    <td style="color: inherit;">{{data.deaths}}</td>

                </tr>
                <app-district *ngIf="data['show']"></app-district>
            </tbody>



**componentA.ts**

  OngetState(state) {

    this.cs.getState(state)
    this.cs.getDataDistrictWise(state)
    // this.showDistrict=!this.showDistrict
  }

 showHideData(data) {
    if(data && data['show'] == true) {
      data['show'] = false;
    } else {
      data['show'] = true;
    }
  }