Angular如何查看FormData内容 解决entries属性不存在报错问题

你遇到的是TypeScript编译阶段的类型报错，本质是当前项目的类型声明未包含FormData的迭代方法定义，和运行时逻辑无关，可通过以下方式解决：

方案1：更新依赖补全类型（推荐） #

升级TypeScript到4.2以上版本，同时更新配套的DOM/Node类型定义即可原生支持该方法：

npm install typescript@latest @types/node@latest --save-dev

安装完成后重启IDE，类型报错就会自动消失，你原来的遍历代码可以直接运行。

方案2：临时断言跳过类型检查 #

如果不想升级项目依赖，可以直接将FormData实例断言为any类型跳过TS校验：

// 遍历打印所有键值对
for (let pair of (this.data as any).entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

如果要快速查看所有内容，也可以直接转为普通对象打印：

console.log(Object.fromEntries((this.data as any).entries()))

方案3：全局扩展FormData类型 #

在项目的全局类型声明文件（通常为typings.d.ts或src/shims-global.d.ts）中添加如下声明，后续所有FormData实例都可以直接调用迭代方法：

interface FormData {
    entries(): IterableIterator<[string, string | Blob]>;
    keys(): IterableIterator<string>;
    values(): IterableIterator<string | Blob>;
}

方案4：低运行环境兼容写法 #

如果运行环境本身不支持FormData的迭代方法，可以通过get方法手动取值：

// 已知key的情况下直接取值
console.log('username', this.data.get('username'))
console.log('avatar', this.data.get('avatar'))

// 不知道全量key的兼容写法
const dataAsObj = this.data as unknown as Record<string, any>
Object.keys(dataAsObj).forEach(key => {
    console.log(key, this.data.get(key))
})

内容的提问来源于stack exchange，提问作者anyway07