代码之家 › 专栏 › 技术社区 › AppDreamer

angular6 json-元素“…未定义”

angular6 json

AppDreamer · 技术社区 · 7 年前

我已经为我的Angular6应用程序创建了一个入门字典…

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中没有显示错误,应用程序编译也很好。我做错什么了?

3 回复 | 直到 7 年前

Osama 7 年前

把你的方言改成这个

//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"
        }
    } ];

或使用

this.languages.dialect.Vocab[1].Pg2

Pavel Levchuk 7 年前

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"
        }
    }
}

Learning is a mess 7 年前

尝试 this.languages.dialect.Vocab[1].Pg2

你的 Pg2 文档是父数组的第二个元素。