实际上我有这样的情况,我想动态更改数组循环。
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>
如果用户单击街道,街道的值应该循环。
expected: *ngFor="let c of city.street"
如果用户单击国家/地区,则国家/地区的值应该循环。
expected: *ngFor="let c of city.country"
我尝试过以下方法:
<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>
它确实有效(模板解析错误,因为城市。{{}}) 还有其他解决方案吗?
最佳答案
您可以使用组件函数来处理它:
//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>
关于javascript - *ng用于数组的动态字符串插值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40504954/