*ng用于数组的动态字符串插值
*ngFor dynamic string interpolation with array
实际上我有想动态改变数组循环的情况。
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>
它确实有效(模板解析错误,因为 city.{{}})
还有其他解决方案吗?
可以使用组件函数来处理:
//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>
实际上我有想动态改变数组循环的情况。
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>
它确实有效(模板解析错误,因为 city.{{}}) 还有其他解决方案吗?
可以使用组件函数来处理:
//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>