Angular 12 - 不可分配给类型 '[number, number]答案

【问题标题】：Angular 12 - is not assignable to type '[number, number]Angular 12 - 不可分配给类型 '[number, number]
【发布时间】：2021-09-18 17:30:22
【问题描述】：

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

类型 '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
  }
}

【问题讨论】：

尝试将视图的类型定义更改为view: number[]

标签： angular ngx-charts angular12

【解决方案1】：

我想问题是你view 属性的类型。根据 cods，它的类型必须是 number[]: doc-ref
注意：文档中的类型不够准确。 view 未定义为数字数组 (number[])，而是定义为 2 个数字的元组 ([number, number]) - source-code ref

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

显式类型是：

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

在Stackblitz example中查看更多示例和详细信息

【讨论】：

出于某种奇怪的原因 view = [400, 400];仍然给我同样的错误？很奇怪
编辑抱怨这个：[view]="view" ... ts 文件现在有这个：view = [400, 400];
您应该添加确切的错误输出以及它发生在哪一行
确切的错误是：错误：src/app/app.component.html:5:14 - 错误 TS2322：类型 'number[]' 不可分配给类型 '[number, number]' .目标需要 2 个元素，但源可能有更少。 5 [view]="view"
由于 [400, 400]' 是 'readonly' const 不能分配给可变类型 '[number, number]。 const 可以被移除。

【解决方案2】：

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

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

参考：Angular Compiler Options TypeScript Configuration

【讨论】：