如何为 Angular 中的字典制作 ngFor?
How do I make ngFor for dictionary in Angular?
有一个 brandsByLetter class:
brandsByLetter: { [id: string] : AutoServiceBrand[]; } = {};
我在 angularJS 中有这个结构,我需要在 Angular11:
<li *ngFor="let (letter, brands) of brandsByLetter">
{{letter}}
{{brands}}
</li>
如何在 Angular 中制作“(字母,品牌)”?
您可以为此使用管道:
<div *ngFor="let item of brandsByLetter | keyvalue">
{{item.key}}:{{item.value}}
</div>
在您的代码中添加此管道:
@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
这是 Stackblitz 中的一个工作示例:
https://stackblitz.com/edit/angular-ahsvig?file=src%2Fapp%2Fapp.component.ts
有一个 brandsByLetter class:
brandsByLetter: { [id: string] : AutoServiceBrand[]; } = {};
我在 angularJS 中有这个结构,我需要在 Angular11:
<li *ngFor="let (letter, brands) of brandsByLetter">
{{letter}}
{{brands}}
</li>
如何在 Angular 中制作“(字母,品牌)”?
您可以为此使用管道:
<div *ngFor="let item of brandsByLetter | keyvalue">
{{item.key}}:{{item.value}}
</div>
在您的代码中添加此管道:
@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
这是 Stackblitz 中的一个工作示例:
https://stackblitz.com/edit/angular-ahsvig?file=src%2Fapp%2Fapp.component.ts