Как прочитать локальный JSON в файл Angular typescript

#json #angular #typescript #primeng

#json #угловатый #машинописный текст #primeng

Вопрос:

Я использую primeng Datepicker. Это [locale] свойство принимает языки, которые я сохраняю в локальном json, называемом datePickerLanguages.json :

 {
    "DatePickerLanguages": [{
            "spanish": {
                "firstDayOfWeek": 1,
                "dayNames": ["domingo", "lunes", ...],
                "dayNamesShort": ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
                "dayNamesMin": ["D", "L", "M", "X", "J", "V", "S"],
                "monthNames": [
                    "Enero",
                    "Febrero",
                    ...
                    "Diciembre"
                ],
                "today": "Hoy",
                "clear": "Borrar"
            }
        },

        {
            "german": {
                "firstDayOfWeek": 1,
                "dayNames": ["Sonntag", "Montag",...]
                ...
                "today": "Heute",
                "clear": "Klar"
            }
        }
    ]
}
 

Я должен перейти spanish german на любой другой язык (по одному языку за раз) в [locale]=xxxxx оф p-calendar . Мой машинописный текст таков:

 import { Component, OnInit, VERSION } from "@angular/core";
import languages from "./datePickerLanguages.json";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular "   VERSION.major;

  value;

  languageList: {}[] = languages;

  selectedLocale;

  ngOnInit() {
    this.selectedLocale = this.languageList.spanish;
  }
}
 

файл шаблона:

 <p-calendar [(ngModel)]="value" name="test" [locale]="selectedLocale">
</p-calendar>
 

Я начинаю понимать:

Свойство ‘spanish’ не существует для типа ‘{}[]’.

Это то, за чем я следил: Как прочитать локальный файл JSON в Angular

Вот stackblitz.

Пожалуйста, укажите на мои ошибки.

Ответ №1:

Попробуйте это:

 languageList: {
    'DatePickerLanguages'
  }  = languages;

ngOnInit() {
    this.selectedLocale = this.languageList.DatePickerLanguages[0].spanish;
}
 

Если у вас есть контроль над файлом JSON. Я бы посоветовал вам изменить свой JSON как таковой:

 {
    "DatePickerLanguages": {   // Initialized it as object instead of array. 
            "spanish": {
                  ....
            },
            "german": {
                  ....
            }
    }
}
 

И получить доступ к испанскому языку с помощью:

 this.selectedLocale = this.languageList.DatePickerLanguages.spanish;
 

Согласно запросу в ваших комментариях:

Причина использования нулевого индекса в моем ответе заключается в том, что в вашем JSON "DatePickerLanguages": это массив [] . Свойство spanish находится в нулевом индексе вашего массива.

Комментарии:

1. вау, это работает. Но, пожалуйста, объясните, почему нулевой индекс?

2. Могу ли я создавать ссылки в JSON таким образом, который мне не нужен [0] . Потому что моему руководителю обучения не понравится этот подход.