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

Question

我已经为我的 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

...它会自动完成我为我选择的标签——在本例中我 select "tag2"。所以我知道一切正常。当我运行应用程序时，控制台显示字符串 "my second string".

一切顺利

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

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

IDE 中没有错误显示，应用编译正常。我做错了什么？

Answer 1

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

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

Answer 2

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

Answer 3

把你的方言改成这个

//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

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

Angular6 JSON - element "...is not defined"

json

angular6