我有一个HTTP请求，它返回一个可观察的对象。它包含许多属性。其中之一是"weight"对象，它包含两个键值，英制和公制。
我尝试循环对象的键值，但在渲染嵌套对象时遇到问题，它只显示

weight [object object]

我的代码

<div style=" margin : auto; border : 1px solid black; width : 70%; ">
<div style="display : flex;  justify-content : space-around; flex-wrap:wrap;">
  <div *ngFor="let breed of (breeds$ | async )" style="flex : 33%">
  <div *ngFor="let item of (breed | keyvalue : unsorted)">
    <div *ngIf="item.key === 'weight'">
      {{breed.weight.imperial}}
    </div>
    <b>{{item.key}}</b>{{item.value}}
  </div>
  </div>
</div>

我的方法很明确

<div *ngIf="item.key === 'weight'">
      {{breed.weight.imperial}}
    </div>

但对其他包含在可观察物体中的物体不起作用，我认为这并不是解决问题的好方法。
由可观察对象返回的数据的示例

{
        "weight": {
            "imperial": "7  -  10",
            "metric": "3 - 5"
        },
        "id": "abys",
        "name": "Abyssinian",
        "image": {
            "id": "0XYvRd7oD",
            "width": 1204,
            "height": 1445,
            "url": "https://cdn2.thecatapi.com/images/0XYvRd7oD.jpg"
        }
    }

我试着用

<div *ngIf="item.key === 'weight'">
<div *ngFor="let data of item.value">{{data.imperial}}</div>
</div>

但它显示了这个错误

Type 'string | number | { imperial: string; metric: string; } | { id: string; width: number; height: number; url: string; }' is not assignable to type '(string & NgIterable<string>) | null | undefined'.ngtsc(2322)