外部* ng内部选定值* ngFor [关闭]

Question

我们正在进行角度4应用，我们需要实现1个要求。我们已经实现了* ngFor以下3级以下是它的代码片段。

<div *ngFor="let country of Countries">
  country.name
   <div *ngFor="let state of country.States">
    state.Name
      <div *ngFor="let city of state.Cities">
         city.Name
      </div>
   </div>
</div>

我们要求默认的州城市应该是可见的，并且在点击任何其他州时，其相应的城市应该填充在城市的div中

我们怎样才能在角度4中实现这个目标？

Answer 1

你想实现吗？如果有人点击状态，那么所有的城市都会在div中看到那个div的孩子？

<div *ngFor="let country of Countries">
  country.name
   <div *ngFor="let state of country.States; let i = index">
    <span (click)="showCities(i)">state.Name</span>
      <div *ngIf="i === index" *ngFor="let city of state.cities">
         city.Name
      </div>
   </div>
</div>

在您的组件中只需粘贴以下代码：

index: number = 0;
public showCities(i){
    this.index = i;
}