外部* ng在内部选定的值* ngFor

时间:2017-12-20 10:02:47

标签: angular

我们正在进行角度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中实现这个目标?

1 个答案:

答案 0 :(得分:-2)

你想实现吗?如果有人点击状态,那么所有城市都会在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;
}