错误：尝试区分“[object Object]”时出错。仅允许使用数组和可迭代对象答案

【问题标题】：Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed Angular错误：尝试区分“[object Object]”时出错。仅允许使用数组和可迭代对象
【发布时间】：2021-09-13 12:10:46
【问题描述】：

我正在尝试显示我的 json 文件中的数据，但我遇到了一个错误，我无法找到解决方案，尽管我对 stackoverflow 进行了研究。

我有这个错误：尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

json

{
  "flags": [
    {
      "id": 1,
      "mnemo": "KHM",
      "libelle": "Cambodge",
      "bigramme": "KH"
    },
    {
      "id": 2,
      "mnemo": "KHM",
      "libelle": "France",
      "bigramme": "FR"
    },
]
}

ts.file

export class HomepageComponent implements OnInit {

  postArray: Ipost[] = [];

  constructor(private homeService: HomeService, private router: Router) { }

  ngOnInit(): void {
    this.getAllNations();
  }

  getAllNations() {
    this.homeService.getAll().subscribe(result => {
      this.postArray = result;
      console.log(this.postArray);
    });
  }    
}

html

<div class="col-1 px-0" *ngFor="let post of postArray">
      <div *ngIf="post.id >= 13">
        <span>{{post.libelle}}</span>
      </div>
    </div>

界面

export interface Ipost {
  id:number,
  mnemo:string,
  libelle:string,
  bigramme:string
}

【问题讨论】：

错误信息很清楚。该数组包含在postArray 变量的flags 属性中。试试：*ngFor="let post of postArray?.flags"。安全导航运算符?. 将在访问flag 的属性之前检查postArray 变量是否已定义。
OR 根据您的变量声明，您需要使用订阅中的flags 属性对其进行初始化：this.postArray = result['flags']。在这种情况下，模板不需要任何更改。

标签： angular typescript

【解决方案1】：

您必须在 *ngFor 中将 postArray 修改为 postArray.flags。因为 postArray 指的是整个 Json 对象，它不是一个数组，但 postArray.flags 是您要访问的数组。

在 ts 文件中初始化 Ipost，如下所示

postArray: Ipost[] = undefined;

并像下面这样更改模板代码

<ng-container *ngIf="postArray">
    <div class="col-1 px-0" *ngFor="let post of postArray?.flags">
          <div *ngIf="post.id >= 13">
            <span>{{post.libelle}}</span>
          </div>
        </div>
    </ng-container>

【讨论】：

“Ipost[]”类型上不存在属性“标志”。