如何在 typescript 变量的帮助下访问 json 键值？答案

【问题标题】：How can I access the json key value with help of typescript variable?如何在 typescript 变量的帮助下访问 json 键值？
【发布时间】：2020-11-29 18:42:56
【问题描述】：

Json 文件

"Tamil": {
  "Name": "பெயர்",
  "Email": "மின்னஞ்சல்",
  "Phoneno": "தொலைபேசி எண்",
  "Password": "கடவுச்சொல்",
  "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
  "Register": "பதிவு",
  "Cancel": "ரத்துசெய்"

},

Ts 文件

import {Component, OnInit} from '@angular/core';
import * as data from '../home/lang.json';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  public language;
  public value;

  constructor() {
    this.value = 'Tamil';
    this.language = data[this.value].Name;
    alert(this.language);
  }

  ngOnInit() {

  }
}

输出

ERROR Error: "Uncaught (in promise): TypeError: _home_lang_json__WEBPACK_IMPORTED_MODULE_2___namespace[this.value] is undefined
HomePage@http://localhost:8100/home-home-module.js:128:9
HomePage_Factory@ng:///HomePage/ɵfac.js:5:10

但是当我尝试这种可能性时，效果很好：

this.language = data["泰米尔语"].Name;

但是在尝试这个时

this.language = 数据[this.value].Name; 它正在显示该错误。

【问题讨论】：

标签： json angular typescript ionic-framework

【解决方案1】：

您正在做的唯一错误是访问您的 JSON 文件中不存在的马拉雅拉姆语，添加马拉雅拉姆语，它会正常工作。

我正在做的一些代码微调可能会有所帮助。

替换

import * as data from '../home/lang.json'

到因为 TypeScript > 2.9 有一个最简单的方法来做到这一点

import data from '../home/lang.json

JSON 文件

{
  "Tamil": {  
    "Name":       "பெயர்",   
    "Email":      "மின்னஞ்சல்",   
    "Phoneno":    "தொலைபேசி எண்"  ,
    "Password":     "கடவுச்சொல்",
    "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
    "Register":"பதிவு",
    "Cancel" :  "ரத்துசெய்"
},
  "Malayalam": {
    "Name":       "பெயர் m",   
    "Email":      "மின்னஞ்சல் m",   
    "Phoneno":    "தொலைபேசி எண் m"  ,
    "Password":     "கடவுச்சொல் m",
    "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும் m",
    "Register":"பதிவு m",
    "Cancel" :  "ரத்துசெய் m"
 }
}

组件

constructor() {
  this.value = "Malayalam";
  this.language = data[this.value].Name;
  alert(this.language)
}

希望这行得通。

【讨论】：

【解决方案2】：

动态导入返回 Promise。用例：

import * as data from '../home/lang.json'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  public language;
  public value;
  constructor() {
    this.value = "Malayalam";
    this.language = data.default <=== add `default`
    [this.value]?.Name;
    alert(this.language)
  }
  ngOnInit() {

  }
}

您可以在控制台中打印data 以查看其结构。

【讨论】：

抱歉，它不是动态导入。

【解决方案3】：

您可以拨打 http 来获取 json 数据

constructor(
        private httpClient: HttpClient
    ) { }

this.httpClient.get('../home/lang.json')
  .subscribe((res) => {
     this.data = res;
 });

或者你可以简单地读取文件

this.data= require('../home/lang.json');

【讨论】：

永远不要这样做，无需使用http读取JSON数据并订阅。
你能解释一下不为此进行http调用的原因吗？
在下面查看我的答案。

【解决方案4】：

CheckThis

你可以通过值

 this.result =this.data[this.language].Name

示例代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: 
    `<input [(ngModel)]="language" (ngModelChange)="onSelection()" > 
    <h1>{{ result ? result : data[language].Name }}</h1>`,
})
export class AppComponent  {
  language = 'Tamil';
  result='';

   public data = {
    "Tamil": {  
              "Name":       "பெயர்",   
              "Email":      "மின்னஞ்சல்",   
              "Phoneno":    "தொலைபேசி எண்"  ,
              "Password":     "கடவுச்சொல்",
              "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
              "Register":"பதிவு",
              "Cancel" :  "ரத்துசெய்" 
    }  ,
     "Malayalam": {  
              "Name":       "Name Malayalam",   
              "Email":      "Email malayalam",   
              "Phoneno":    "தொலைபேசி எண்"  ,
              "Password":     "கடவுச்சொல்",
              "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
              "Register":"பதிவு",
              "Cancel" :  "ரத்துசெய்" 
    }  
   }

onSelection() {
this.result =this.data[this.language].Name
  }


}

【讨论】：

【解决方案5】：

我想你忘了在你的 json 中添加马拉雅拉姆语。

如果您的 json 中可能不存在该语言，那么您应该这样做

this.language = data[this.value] ? data[this.value].Name : '';

您也可以使用默认语言来代替空白。如果您的 json 文件中有默认语言可用，那么您可以像这样使用。

this.language = data[this.value] ? data[this.value].Name : data['defaultLanguage'].Name ;

【讨论】：