类型 'any[]' 不能用作索引类型 Angular 构建答案

【问题标题】：Type 'any[]' cannot be used as an index type Angular build类型 'any[]' 不能用作索引类型 Angular 构建
【发布时间】：2017-05-01 22:34:10
【问题描述】：

当我使用ng serve 时，一切正常。当我使用ng serve --prod --aot 时，它会抱怨Type 'any[]' cannot be used as an index type。我找不到任何可以修复它的东西。并且它似乎所指的“type any[]”是 tags 变量，因为当我将其注释掉时，一切都会编译。

以下是相关代码：

//cluster-details.component.ts
...
export class ClusterDetailsComponent implements OnInit {
infoTitles = {
    edgeNodePublicDNS: 'Edge Node Public DNS',
    ...
    tags: 'Tags'
};
infoKeys: string[];
info: any;
tags: any[];
...
this.requestsService.emrinstanceDetailsGET(body)
        .subscribe(
            (data) => {
                this.infoKeys = Object.keys(data);
                this.info = data;
...

cluster-details.component.html：

<tr *ngFor="let key of infoKeys">
            <td>
                <strong>{{ infoTitles[key] }}:</strong>
            </td>
            <td>
                {{info[key]}}
            </td>
        </tr>
        <tr>
            <td>
                <strong>{{ infoTitles[tags] }}:</strong>
            </td>
            <td>
                {{tags}}
            </td>
        </tr>

请求返回的数据如下：

.map(
      (response: Response) => {
          const data = response.json();
          return data['clusterDetail'];

现在我知道'只是不要让它输入'any[]'，但我不知道该怎么做。返回的是一个 JSON 值，它只是一个 Object 类型。将类型更改为 Object 不起作用，我没有看到任何其他类型的工作。也许我必须为它制作一个界面？

【问题讨论】：

info 变量在上面显示为any 类型。如果你把它改成any[]，你会得到同样的错误吗？
我确实得到了同样的错误，如果我使用 Object 或 Object[]。它也仍然适用于 ng serve 与这四个中的任何一个。

标签： angular typescript

【解决方案1】：

我相信这里的 AOT 无法解析你的 'infoTitles'，因为你没有给它一个特定的类型，而是使用了 'infoTitles[key]', object[name] （AOT 理所当然地认为你正在使用数组语法），这导致编译错误。可能的解决方案：

infoTitles: InfoTitle = {
    edgeNodePublicDNS: 'Edge Node Public DNS',
    ...
    tags: 'Tags'
};

你需要创建一个类：

export class InfoTitle {
    edgeNodePublicDNS: string;
    ...
    tags: string;
}

【讨论】：

这并没有解决错误，但添加后代码仍然有效。我再次查看了 tags 变量，它似乎实际上就在错误所在的位置。标签以 JSON 对象数组的形式出现，我尝试解析它们并显示它们。我会看看我是否不能让它工作。

【解决方案2】：

想通了。对我无意的变量的简单误用：

HTML 行 ...{{ infoTitles[tags] }}... 正在尝试使用 tags 变量索引 infoTitles - 我的意思是这是一个字符串，它只是“标签”，其中它将正确引用我需要的 infoTitles 值。但我没有发现我正在使用标签数组。所以修复应该只是使用一个字符串或变量，如tagIndexString = 'tags'，然后HTML可以是...{{ infoTitles[tagIndexString] }}...

【讨论】：

【解决方案3】：

在我的场景中，由于以下代码错误，'ng serve' 命令忽略了相同的错误：

给出错误的代码：

<span data-toggle="tooltip" title={{subData[[col.field]]}}>{{subData[[col.field]]}}</span>

更改代码以解决错误：

<span data-toggle="tooltip" title={{subData[col.field]}}>{{subData[col.field]}}</span>

如果您的 html 代码有，只需从 '[[' 中删除多余的 '['。

【讨论】：