时间戳

首页 > 解决方案 > Angular6 JSON - 元素“......未定义”

json - Angular6 JSON - 元素“......未定义”

问题描述

我为我的 Angular 6 应用程序创建了一个入门字典...

import { Injectable } from "@angular/core";

@Injectable()
export class Languages {
    //template (in English)
    public dialect = {
        "Vocab": [{
            "Pg1": {
                "tag1": "my first string",
                "tag2": "my second string",
                "tag3": "my third string"
            }
        }, {
            "Pg2": {
                "tag1": "my fourth string",
                "tag2": "my fifth string",
                "tag3": "my sixth string"
            }
        }, {
            "Pg3": {
                "tag1": "my seventh string",
                "tag2": "my eighth string",
                "tag3": "my nineth string"
            }
        }, ]
    }
}

当我在调用组件中键入它时...

console.log(this.languages.dialect.Vocab[0].Pg1.ta

...它会自动完成我为我选择的标签——在这种情况下，我选择“tag2”。所以我知道一切正常。当我运行应用程序时，控制台显示字符串“我的第二个字符串”。

都好

但是......当我回溯并输入“Vocab [0].Pg2.ta”时，它仍然会自动完成，但是当我选择 Pg1 以外的任何值时，我会收到以下错误......

ERROR TypeError: "this.languages.dialect.Vocab[0].Pg2 is undefined"

IDE 中没有显示错误，并且应用程序编译得很好。我究竟做错了什么？

标签： jsonangular6

解决方案

this.languages.dialect.Vocab[0].Pg2必须是this.languages.dialect.Vocab[1].Pg2。

您可以像这样重写代码以便于访问：

// this.languages.dialect.Vocab.Pg2

public dialect = {
    "Vocab": {
        "Pg1": {
            "tag1": "my first string",
            "tag2": "my second string",
            "tag3": "my third string"
        }, "Pg2": {
            "tag1": "my fourth string",
            "tag2": "my fifth string",
            "tag3": "my sixth string"
        }, "Pg3": {
            "tag1": "my seventh string",
            "tag2": "my eighth string",
            "tag3": "my nineth string"
        }
    }
}

推荐阅读