Javascript 使用httpclient调用api'；这是不对的

我试图简单地显示我的json，但有点不对劲，我找不到我的错误，我还在app.module.ts中导入了httpclientModule

我控制台中的错误是

“”错误：找不到类型为“object”的不同支持对象“[object]”。NgFor仅支持绑定到阵列之类的Iterables。“”

boat.json

{
    "Voilier": [
        {
            "img": "/assets/img/boat-img/voilier.jpg",
            "longeur": 10,
            "largeur": 20,
            "tirantEau": 50,
            "equipage": true,
            "annexe": false
        }
    ],
}

船上服务

 configUrl: string = 'assets/json/boat.json';

  constructor(private htpp: HttpClient) { }

  getBoat(): Observable<IBoat[]> {
    return this.htpp.get<IBoat[]>(this.configUrl);
  }

html

 <tbody>
        <tr *ngFor="let bott of user">
            <td>{{bott.longeur}}</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>

{{bott.longeur}}
2.
3.
4.
5.

我认为在订阅中，您应该将

data.Voilier

分配给用户属性，如下所示：

this.boatService.getBoat()
 .subscribe(data => {
   this.user = data.Voilier
 });

---

检查请求url configUrl，它是否与完美链接一起工作？

this.user=data.Voilier

maybe？@PalashKantiBachar如果我是console.log（this.configUrl）；我没有在控制台中显示的json是angular应用程序中的json文件吗？或远程服务器。我的JSON文件位于my assets/JSON/boat.jsoni中。我有以下错误：类型“IBoat[]”上不存在属性“Voilier”。20 this.user=data.Voilier；

this.boatService.getBoat()
 .subscribe(data => {
   this.user = data.Voilier
 });