如何為 Angular 中的字典制作 ngFor？

Question

有一個品牌ByLetter class：

brandsByLetter: { [id: string] : AutoServiceBrand[]; } = {};

我在 angularJS 中有這個結構，我需要在 Angular11 中制作：

<li *ngFor="let (letter, brands) of brandsByLetter">
    {{letter}}
    {{brands}}
</li>

如何在 Angular 中制作“（字母，品牌）”？

Answer 1

您可以為此使用 pipe：

<div *ngFor="let item of brandsByLetter | keyvalue">
  {{item.key}}:{{item.value}}
</div>

在您的代碼中添加此 pipe：

@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