I get the error “Type { [p: string]: Category } must have a Symbol.iterator method that returns an iterator” when trying to iterate over a constant in TypeScript/Angular. How can I solve this problem? Are there any best practices or best practices to successfully iterate over complex types like { [p: string]: Category }?

<mat-select formControlName="category">
      @for (category of CATEGORIES; track category.key) {
        <mat-option value={{category.key}}>{{ category.value }}</mat-option>
      }
</mat-select>

export interface Category {
  key: string;
  value: string;
  color: string;
}

export const CATEGORIES: { [key: string]: Category } = {
  TECHNICAL_TASK: {
    key: 'TECHNICAL_TASK',
    value: 'Technical Task',
    color: '#1FD7C1'
  },
  USER_STORY: {
    key: 'USER_STORY',
    value: 'User Story',
    color: '#0038FF'
  }
};