角度错误 ng0303 ngForIn - Javascript

简介

在Angular中使用ngFor循环指令时，可能会出现角度错误ng0303 ngForIn。这个错误表示你在使用ngForIn循环时，循环的对象并不是一个对象字面量（Object Literal），这个错误通常是由于循环的对象数据类型错误引起的。

问题原因

在使用ngForIn循环指令时，你需要循环的对象必须是一个对象字面量（Object Literal），例如：

let obj = {a:1, b:2, c:3};

但是有时候我们在使用ngForIn循环时，循环的对象并不是一个对象字面量，而是一个简单的数组，这时就会引发ng0303错误。

解决方法

1.使用ngFor循环

ngForIn适用于循环对象字面量，而ngFor则适用于循环数组。因此，如果你要循环一个数组，请使用ngFor，而不是ngForIn。

例如，让我们假设你有一个名为users的数组，你想循环其中的每个user：

<div *ngFor="let user of users">
 {{ user.username }}
</div>

2.转换对象到字面量

如果你一定要使用ngForIn循环，但是你的数据是一个普通的对象而不是对象字面量，可以使用Object.keys()方法把对象转换成对象字面量。

例如，假设你有一个名为userData的对象：

const userData = {
  username: 'John',
  email: 'john@example.com',
  age: 30
};

你可以使用Object.keys()方法将userData转换成对象字面量，然后使用ngForIn循环：

<div *ngFor="let key of Object.keys(userData)">
  {{ key }}: {{ userData[key] }}
</div>

结论

当你使用ngForIn循环指令时，循环的对象必须是一个对象字面量（Object Literal）。如果循环的对象是一个数组，则应该使用ngFor指令，如果必须循环对象，请使用Object.keys()方法将对象转换为对象字面量。