Служба JSON, возвращающая неопределенное свойство с Angular 7

Question

Это должно быть самым простым.У меня есть компонент, который вызывает службу, которая импортирует локальный JSON напрямую (см. Импорт JSON напрямую с Angular 7 ). Он прекрасно читает содержимое JSON, но свойство pages не определено.Я думаю, что я настроил все на основе StackBlitz в этой ссылке, кажется, ничего особенного.HTML пока нет, все это только через консоль.Он находится в app.component.html.

Чтение локальных файлов json json.service.ts: 14

[{…}] 0: {name: "Home"} длина:1__proto__: Array (0) json.service.ts: 15

undefined home.component.ts: 31

json.service.ts:

import { Injectable } from '@angular/core';
import SampleJson from '../assets/SampleJson.json';

export interface JsonInterface {
  name: any;
}

@Injectable()
export class JsonService {
  ngOnInit() {
   console.log('Reading local json files');
   console.log(SampleJson);
  }
}

home.component.ts:

import { JsonService, JsonInterface } from '../json.service';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
  constructor(service: JsonService) {
    service.ngOnInit();
  };

  @Input() pages: JsonInterface;

  ngOnInit() {
    console.log(this.pages);
  }
}

Sample.json

{ "name":"Home" }

Answer 1

Проблема со страницами.Вы в самом деле объявили «pages» как «JsonInterface», который является только типом «pages», но никогда не инициализируется с каким-либо значением, поэтому оно не определено. Вам нужно написать функцию в Service как ответ выше @Christoph.

Надеюсь, вы понимаете, почему произошла эта ошибка, и если вы не вводите значение в «страницы» из HTML, вам не нужно объявлять его как «@ Input».

Answer 2

Если я правильно понимаю ваш журнал, он работает как положено:

  constructor(service: JsonService) {
    service.ngOnInit();
  };

Вы запрашиваете услугу и получаете экземпляр.Затем вы вызываете ngOnInit:

  ngOnInit() {
   console.log('Reading local json files');
   console.log(SampleJson);
  }

Теперь он записывает «чтение…» и содержимое вашего файла json.

  ngOnInit() {
    console.log(this.pages);
  }

Затем вы регистрируете this.pages, который пуст.Вы никогда не заполняли это.Вы никогда ничего не делали с вашим сервисом или данными, загруженными в ваш сервис.

Я думаю, что вам нужно что-то вроде этого

export class JsonService {
  getPages() { return SampleJson; }
}

и в вашем компоненте:

  constructor(private service: JsonService) {}
  ngOnInit() {
    this.pages = this.service.getPages();
    console.log(this.pages);
  }

Пример кода не тестировался, но я думаю, вы поняли.