我正在使用Angular应用程序,而我正在使用COVOID 19应用程序。
这里有两个组件,其中组件A列出所有州,而组件B列出特定州的所有区。
这是我的堆栈闪击链接stack blitz link
我想要这样的输出expected output
我从堆栈溢出stack overflow reference中获得了参考
现在,我以表格格式显示了组件的所有数据,当我单击该状态时,它应该加载所有被单击状态的数据,当我再次单击该状态时,它应该关闭。另外,如果我单击所有区域的其他州列表,则应该显示该州
但是我不知道将我的位置放在哪里,因为如果将其放入for循环中,并且如果我尝试显示一个州的列表,它将在所有州下显示相同的地区列表
这是我的一部分代码
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
}
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;
}
}
我希望您可以从您提到的参考资料中尝试一些东西
<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)
}