* ngFor數組動態字符串插值

Question

其實我有我想動態改變數組循環的情況。

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> 

如果用戶點擊街道，街道的值應循環。

預期：* ngFor = 「讓city.street的C」

如果全國用戶點擊，這個國家的價值觀應該循環。

預期：* ngFor =

我曾嘗試以下 「讓city.country的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> 

它doenst工作（模板解析錯誤，因爲城市{{ }}） 是否有解決方案？

Answer 1

可以使用組件的函數來處理它：

//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>