我在 Angular 應用程序中工作，我正在開發 COVID 19 應用程序。在這里，我有 2 個組件，其中組件 A 列出了所有州，組件 B 列出了特定州的所有區?，F在我已經以表格格式顯示了組件的所有數據，當我單擊該狀態時，它應該加載單擊狀態的所有數據，當我再次單擊該狀態時，它應該關閉。此外，如果我點擊所有地區的其他州列表，該州應該會顯示出來但我不知道把我的放在哪里，<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  }