角度 14：对象在更新后属于 ngFor 中的 'unknown' 类型

Question

将我的项目更新到angular 14.0.4

在一个组件的html中，我有以下内容:

<div class="file" *ngFor="let file of localDocumentData.files; index as i;">
<div class="card">
<img src={{file.thumbnail}} alt={{file.file_name}}>
<p>{{file.file_name}}</p>
<p>{{ file.file_size | bytes: false }}</p>
</div>
</div>

ngFor循环中的所有对象属性都被高亮显示，并出现以下错误

Object is of type 'unknown'.ngtsc(2571)

files数组是从API中作为对象的一部分拉进来的，在ts文件中，文件对象被初始化为:

localDocumentData: any;

项目仍然在本地构建，没有任何问题，但它仍然突出显示代码。

高亮显示

截图tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"useUnknownInCatchVariables": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

Answer 1

你可以尝试为变量localDocumentData重新定义一个合适的接口类型。

从我看到的应该是这样的:

interface DocumentData{
files:File[];
}
interface File{
file_name:string;
file_size:number;
}
localDocumentData:DocumentData;

Answer 2

如果不能定义类型，可以使用$any:

<div class="file" *ngFor="let file of $any(localDocumentData).files; index as i;">
<div class="card">
<img src={{file.thumbnail}} alt={{file.file_name}}>
<p>{{file.file_name}}</p>
<p>{{ file.file_size | bytes: false }}</p>
</div>
</div>