根据Angular 9中我的表格列的标题，基于表格内特定标题的单击事件显示/隐藏组件

Question

我在 Angular 应用程序中工作，我正在开发 COVID 19 应用程序。

在这里，我有 2 个组件，其中组件 A 列出了所有州，组件 B 列出了特定州的所有区。

现在我已经以表格格式显示了组件的所有数据，当我单击该状态时，它应该加载单击状态的所有数据，当我再次单击该状态时，它应该关闭。此外，如果我点击所有地区的其他州列表，该州应该会显示出来

但我不知道把我的放在哪里，<app-componentB></app-componentB>因为如果把它放在 for 循环中，如果我尝试显示一个州的列表，它会在所有州下显示相同的地区列表

这是我的一段代码

组件A.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>

组件A.ts

 showDistrict=true

  OngetState(state) {

    this.cs.getState(state)

    this.cs.getDataDistrictWise(state)

    this.showDistrict=!this.showDistrict

  }

Answer 1

you need to do a few changes and your code is**componentA.html**&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody *ngFor="let data of statewisedata;let i=index">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr class="state">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td (click)="OngetState(data.state); showHideData(data)" style="font-weight: 600;">{{data.state}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="color: inherit;">{{data.confirmed}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp; &nbsp; {{DailystateStatus[i]?.confirmed}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="color: inherit;">{{data.active}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="color: inherit;">{{data.recovered}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="color: inherit;">{{data.deaths}}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <app-district *ngIf="data['show']"></app-district>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>**componentA.ts**&nbsp; OngetState(state) {&nbsp; &nbsp; this.cs.getState(state)&nbsp; &nbsp; this.cs.getDataDistrictWise(state)&nbsp; &nbsp; // this.showDistrict=!this.showDistrict&nbsp; }&nbsp;showHideData(data) {&nbsp; &nbsp; if(data && data['show'] == true) {&nbsp; &nbsp; &nbsp; data['show'] = false;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; data['show'] = true;&nbsp; &nbsp; }&nbsp; }

Answer 2

我希望你可以从你提到的参考资料中尝试一些东西&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp;<td (click)="OngetState(data.state,i)" style="font-weight: 600;">{{data.state}}</td>&nbsp; &nbsp; <td>...</td>&nbsp; &nbsp; <td>...</td>&nbsp; &nbsp; <td>...</td>&nbsp; &nbsp; </tr><app-district *ngIf="selectedIndex == i && showDistrict==true"></app-district>组件.tsselectedIndex = -1;&nbsp; showDistrict:boolean=falseOngetState(state,i) {&nbsp; &nbsp; console.log(this.showDistrict)&nbsp; &nbsp; this.cs.getState(state)&nbsp; &nbsp; this.cs.getDataDistrictWise(state)&nbsp; &nbsp; this.selectedIndex = i;&nbsp; &nbsp;&nbsp; &nbsp; this.showDistrict=!this.showDistrict&nbsp; &nbsp; console.log(this.showDistrict)&nbsp; }