角度 12 - 不可分配给类型 '[数字，数字]

Question

我正在Angular 12中试用ngx图表库，但我一直遇到这个问题：

类型"any[]"不可分配给类型"[number，number]"。

目标需要2个元素，但源可能更少。

我不知道这个错误是什么意思。

这是代码：

HTML:

<ngx-charts-linear-gauge 
[view]="view" 
[scheme]="colorScheme" 
[value]="value" 
[previousValue]="previousValue" 
(select)="onSelect($event)" 
[units]="units"
>
</ngx-charts-linear-gauge>

ts:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
single: any[];
view: any[] = [400, 400];
colorScheme = {
domain: ['#aae3f5']
};
value: number = 43;
previousValue: number = 70;
units: string = 'counts';
onSelect(event) {
console.log(event);
}
}

关于这个错误意味着什么，如何解决这个问题，有什么想法吗？

ts配置代码为：

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

Answer 1

我想问题出在view属性的类型上。根据密码，它的类型必须是number[]:doc ref
注意：文档中的类型不够精确。view不是定义为数字数组(number[](，而是定义为2个数字的元组([number, number](-源代码引用

但你把它定义为any[]
根据您的typescript编译器设置，您可能会收到错误或警告。

显式类型为：

view: [number, number] = [400, 400];

请参阅此Stacklitz示例中的更多示例和详细信息

Answer 2

在tsconfig.json中设置"strictTemplates": false，如下所示：

"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false,
}

参考文献：Angular编译器选项TypeScript配置