Блог

Главная - Вопросы по программированию - Отображать один узел из JSON в Angular> 10

Отображать один узел из JSON в Angular> 10

#json #angular

#json #угловатый

Вопрос:

Я хотел бы знать, как отобразить один узел из файла json в приложении angular.

Это мои данные.json:

 {
    "name": "John";
    "surname": "Doe
}

Я хотел бы вывести в угловой компонент результат фамилии. Таким образом, я могу создать компонент ReadJson:

 export class ReadJsonComponent implements OnInit {
data: any = (data as any).default;
  constructor() {
    console.log(data.surname);
  }
  ngOnInit(): void {
  }
}

Я не могу сделать это с другим компонентом (например, с заголовком). Не могли бы вы, пожалуйста, сказать мне, что я делаю не так?

Ответ №1:

Сначала импортируйте файл JSON следующим образом.

 import myJson = require("./myJson.json");

затем установите его в локальной переменной,

  data: any = myJson;

затем используйте его везде, где захотите.

 export class AppComponent implements OnInit {
  name = "Angular";
  data: any = myJson;

  ngOnInit() {
    console.log("surname", this.data.surname);
  }
}

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

1. Спасибо за ваш ответ. Следуя вашему коду, предположим, что я поместил это в AppComponent. Теперь, как я могу получить доступ {{ data.surname }} , например, к HeaderComponent?

2. импортируйте снова в header.compoenent.ts, лучше дайте мне сценарий в stackbiltz, он сможет помочь.

3. Спасибо, так вы имеете в виду, что я должен импортировать это в каждый компонент? Нет способа передать json от родительского к дочернему? Заранее спасибо

4. можно отправить данные от родителя к потомку 2 способами: либо использовать Сервисы, либо @Input в дочернем компоненте.