[英]Angular 12 - is not assignable to type '[number, number]
I am trying out ngx-charts library in Angular 12 and I keep getting this issue:我正在 Angular 12 中尝试 ngx-charts 库,但我一直遇到这个问题:
Type 'any[]' is not assignable to type '[number, number]'.
类型 'any[]' 不能分配给类型 '[number, number]'。
Target requires 2 element(s) but source may have fewer.
目标需要 2 个元素,但源可能更少。
I don't know what the error means.我不知道错误是什么意思。
Here is the code:这是代码:
HTML: HTML:
<ngx-charts-linear-gauge
[view]="view"
[scheme]="colorScheme"
[value]="value"
[previousValue]="previousValue"
(select)="onSelect($event)"
[units]="units"
>
</ngx-charts-linear-gauge>
ts: 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);
}
}
Any ideas on what the error means, how to fix this?关于错误意味着什么的任何想法,如何解决这个问题?
ts config code is: 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
}
}
I guess the issue is the type of you view
property.我想问题是您
view
属性的类型。 According to the cods it must be of type number[]
: doc-ref根据鳕鱼,它必须是
number[]
类型: doc-ref
note: the type in the docs is not exact enough.注意:文档中的类型不够准确。
view
is not defined as array of number ( number[]
), but as a tuple of 2 numbers ( [number, number]
) - source-code ref view
不是定义为数字数组( number[]
),而是定义为 2 个数字的元组( [number, number]
) - 源代码参考
But you define it as any[]
.但是您将其定义为
any[]
。
Depending on your typescript compiler settings, you may get an error or warning.根据您的打字稿编译器设置,您可能会收到错误或警告。
When you need the exact correct type use:当您需要完全正确的类型时,请使用:
// use as const so that typescript will infer the type [number, number] instead of number[]
view = [400, 400] as const;
The explict type would be:显式类型是:
view: [number, number] = [400, 400];
Set "strictTemplates": false
in your tsconfig.json, like this:在
"strictTemplates": false
设置"strictTemplates": false
,如下所示:
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": false,
}
Refs: Angular Compiler Options TypeScript Configuration参考: Angular 编译器选项TypeScript 配置
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.