Javascript *基于数组的动态字符串插值算法

实际上我有一种情况，我想动态地改变数组循环

export interface City { 
   street: Street[];
   country: Country[];
}

<div>
    <div (click)="OnClick()">Street</div>
    <div (click)="OnClick()">Country</div>
</div>

<div *ngIf="clicked">       
         <div *ngFor="let c of city.street">    
              <div>
                {{c.name}}          
              </div>        
         </div>  
</div>

导出接口城市{
街道:街道[];；
国家：国家[]；
}
街头
国家
{{c.name}}

如果用户单击Street，则Street的值应循环

预期：*ngFor=“让c离开城市。街道”

如果用户单击country，则country的值应循环

预期：*ngFor=“让c离开城市。国家”

我尝试了以下方法：

<div>
    <div (click)="OnClick('street')">Street</div>
    <div (click)="OnClick('country')">Country</div>
</div>

<div *ngIf="clicked">       
         //Porperty Binding
         <div *ngFor="let c of city.{{onClickParameter}}">  
              <div>
                {{c.name}}          
              </div>        
         </div>  
</div>

街头
国家
//多孔结合
{{c.name}}

它不起作用（模板解析错误，因为城市。{{}）

---

还有其他解决方案吗？

您可以使用组件功能来处理它：

//Component
export interface City { 
 street: Street[];
 country: Country[];
}

export class MyComponent {
  public selected : string = 'street';
  public city: City;

  OnClick(select: string) {
    this.selected = select;
  }

}

// You HTML

<div>
  <div (click)="OnClick('street')">Street</div>
  <div (click)="OnClick('country')">Country</div>
</div>

<div *ngIf="clicked">       
  <div *ngFor="let c of city[selected]">  
    <div>{{c.name}}</div>
  </div>  
</div>

//组件
出口接口城市{
街道:街道[];；
国家：国家[]；
}
导出类MyComponent{
公共选择：字符串='street'；
公共城市：城市；
OnClick（选择：字符串）{
this.selected=select；
}
}
//你喜欢HTML吗
街头
国家
{{c.name}}

您可以使用组件函数来处理它：

//Component
export interface City { 
 street: Street[];
 country: Country[];
}

export class MyComponent {
  public selected : string = 'street';
  public city: City;

  OnClick(select: string) {
    this.selected = select;
  }

}

// You HTML

<div>
  <div (click)="OnClick('street')">Street</div>
  <div (click)="OnClick('country')">Country</div>
</div>

<div *ngIf="clicked">       
  <div *ngFor="let c of city[selected]">  
    <div>{{c.name}}</div>
  </div>  
</div>

//组件
出口接口城市{
街道:街道[];；
国家：国家[]；
}
导出类MyComponent{
公共选择：字符串='street'；
公共城市：城市；
OnClick（选择：字符串）{
this.selected=select；
}
}
//你喜欢HTML吗
街头
国家
{{c.name}}

您可以通过使用属性将

city[selected]

移动到类中来进一步简化模板

get listOfThings（）{返回this.city[this.selected]；}

您可以通过使用属性将

city[selected]

移动到类中来进一步简化模板[this.selected]；}