Angular ANGLING HTTP.GET()返回包含数据的数组

我有一项服务:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Color } from '../model/color';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ColorService {
  private productsUrl = 'http://localhost:5500/colors/';

  constructor(private http: HttpClient) { }

  getColors(): Observable<Color[]> {
    var colors = this.http.get<Color[]>(this.productsUrl + "all");
    
    return colors;
  }
}

以及获取此方法结果的组件:

ngOnInit(): void {
    this.colorsService.getColors()
        .subscribe((colors) => {
          this.colors = Object.values(colors);
          this.colors.sort((a,b) => a.name.localeCompare(b.name));
          console.log(colors);
        }, err => {
          this.displaySpinner = false;
        }, () => {
          this.displaySpinner = false;
        });
  }

我的 colored颜色 界面看起来像这样:

export interface Color {
    id: number;
    number: string;
    name: string;
    imagePath: string;
    category: string;
    color: string;
    brand: string;
}

现在，当我在组件中执行此控制台日志(log)时，它会给我一个名为Colors的数组，并将另一个包含实际数据的数组作为子数组:

{
  colors: [
    {
      id: 1,
      number: 159,
      name: 'glamorous peach',
      imagePath: '/src/assets/img/colors/color104.jpeg',
      category: 'summer',
      color: 'orange',
      brand: 'Pink Gellac'
    }
  ]
}

我似乎记得在以前版本的ANGLING中并非如此，当我在html页面中执行类似下面的操作时，它无法获得 colored颜色 .name，我认为这是因为这里发生了数组嵌套:

<mat-grid-tile *ngFor="let color of colors">
            <mat-card class="example-card"
                style="width: 95%; border-radius:15px; box-shadow: 4px 4px 6px -1px rgba(0,0,0,0.15);">
                <mat-card-content>
                    <mat-grid-list cols="1" rowHeight="250">
                        <mat-grid-tile class="tile" style="overflow:auto;">
                          <div class="wrapper">
                            <p>{{color.name}}</p>
                          </div>
                        </mat-grid-tile>
                      </mat-grid-list>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

你知道怎么解决这个问题吗？由于在服务(Color[])中的输入，我似乎无法将此数组操作为ngFor工作所需的内容.