':'预期.ts(1005) 如何修复

Question

看到了很多问题，尝试了建议，到目前为止还没有运气。当前\n使用来自 ng version 命令的 vsc 版本 1.76.2、Node 16.14.2 ts 版本 4.6.4

\n

条形图数据是

\n

  public barChartData: ChartData<'bar'> = {\n    labels: [],\n    datasets: [\n      {\n        data: [],\n        // data: [65, 59, 80, 81, 56, 55, 40],\n        // backgroundColor: ['#012169', '#0073cf', '#646464', '#012169', '#0073cf', '#646464', '#012169'],\n        // hoverBackgroundColor: ['#8090b4', '#80b9e7', '#919191', '#8090b4', '#80b9e7', '#919191', '#8090b4'],\n      },\n    ]\n  };\n

\n

它是 Chart.js v 3.9.1 的一部分，标签可以是未定义的

\n

在 vsc 中，弹出窗口显示

\n

(property) ChartData<"bar", number[], unknown>.labels?: unknown[] | undefined\n

\n

事件处理程序是发生错误的地方：

\n

  public chartClicked(e: any): void {\n    this.barChartData.labels?[0];\n\n    console.log(e);\n  }\n

\n

我收到一个错误

\n

':' expected.ts(1005)\n

\n

当尝试从 ng 服务构建时

\n

./src/app/components/test03/test03.component.ts:127:69 - Error: Module parse failed: Unexpected token (127:69)\nFile was processed with these loaders:\n * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js\n * ./node_modules/@ngtools/webpack/src/ivy/index.js\nYou may need an additional loader to handle the result of these loaders.\n|     }\n|     chartClicked(e) {\n>         console.log(this.barChartData.labels ? [e.active[0].index] : );\n|         console.log(e);\n|     }\n\nError: src/app/components/test03/test03.component.ts:135:61 - error TS1005: ':' expected.\n\n135     console.log(this.barChartData.labels?[e.active[0].index]);\n                                                                ~\n\n\n\n\n\xc3\x97 Failed to compile.\n

\n

如何解决这个问题？

\n

Answer 1

要使用带有括号的可选链接运算符，您仍然需要在问号后面添加一个点：

this.barChartData.labels?.[0];

MDN 参考