Свойство «пример» не существует для типа «имя компонента» ⇐ Javascript

[Anonymous]

Используя Angular v17, я пытаюсь получить данные из app.comComponent.ts в home.comComponent.ts, но получаю сообщение об ошибке: «Свойство «results» не существует для типа «HomeComponent».
Мой проект довольно разбросан, но вот с чем мне приходится работать:
Это из home.comComponent.ts

Код: Выделить всё

import { Component, inject, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataLayerComponent } from '../data-layer/data-layer.component';
import { DataLayer } from '../datalayer';
import { DataService } from '../data.service';
import { AppComponent } from '../app.component';

@Component({
selector: 'app-home',
standalone: true,
imports: [
CommonModule, DataLayerComponent, AppComponent],

/* Template here */

export class HomeComponent {

dataLayer: DataLayer = {
name: this.results.name, /* Property 'results' does not exist on type 'HomeComponent'.*/
capital: this.results.capital,
region: this.results.region,
income: this.results.income,
long: this.results.long,
lat: this.results.lat
};
}

Мой файл datalayer.ts:

Код: Выделить всё

export interface DataLayer {
name: {};
capital: {};
region: {};
income: {};
long: {};
lat: {};
}

Мой файл data-layer.comComponent.ts (если применимо):

Код: Выделить всё

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataLayer } from '../datalayer';
import { RouterLink } from '@angular/router'
import { RouterOutlet } from '@angular/router'

@Component({
selector: 'app-data-layer',
standalone: true,
imports: [CommonModule, RouterLink, RouterOutlet],
template: `

Name: {{dataLayer.name}}

Capital: {{dataLayer.capital}}

Region: {{dataLayer.region}}

Income: {{dataLayer.income}}

Longitude: {{dataLayer.long}}

Latitude: {{dataLayer.lat}}

Learn More

`,
styleUrl: './data-layer.component.css'
})
export class DataLayerComponent {

@Input() dataLayer!: DataLayer

}

И это из app.comComponent.ts

Код: Выделить всё

import { RouterModule } from '@angular/router';
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Component({
selector: 'app-root',
standalone: true,
imports: [HomeComponent, RouterModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

export class AppComponent implements AfterViewInit {
title = 'angular-map';

results: any;

@ViewChild('svgObject')
svgObject!: ElementRef;

ngAfterViewInit(): void {
this.svgObject.nativeElement.addEventListener('load', () => {
const svgDoc = this.svgObject.nativeElement.contentDocument;
const paths = svgDoc.querySelectorAll('path');
paths.forEach((path: { addEventListener: (arg0: string, arg1: (event:
any) => void) => void; }) => {
path.addEventListener('click', (event: { target: any; }) => {
this.onCountryClick(event.target);
});
});
});
}

constructor(private http: HttpClient) {}
onCountryClick(target: any) {
console.log('Country clicked:', target.id);
var addedId = target.id;
var fullUrl = ('https://api.worldbank.org/v2/country/' + addedId + '?format=json');
console.log(fullUrl);
this.http.get(fullUrl).subscribe(responseData => console.log(responseData));
this.http.get(fullUrl).subscribe(data =>  {
this.results = data;
console.log(this.results);
console.log('Country Name:', this.results[1][0].name);
this.results.name = this.results[1][0].name;
this.results.capital = this.results[1][0].capitalCity;
this.results.region = this.results[1][0].region.value;
this.results.income = this.results[1][0].incomeLevel.value;
this.results.long = this.results[1][0].longitude;
this.results.lat = this.results[1][0].latitude;
});
}
}

Код в app.comComponent.ts отображает правильные данные из файла JSON, полученного с api.worldbank.org, в журнале консоли. Мне нужно передать эту информацию в home.comComponent.ts, чтобы она правильно отображалась на созданной мной веб-странице.
Вот app.comComponent.html

Код: Выделить всё

Я попробовал это в файле home.comComponent.ts, но столкнулся с другой проблемой:

Код: Выделить всё

export class HomeComponent {

dataLayer: DataLayer = {
name: {{this.results[1][0].name}},
capital: {{this.results[1][0].capital}},
region: {{this.results[1][0].region}},
income: {{this.results[1][0].income}},
long: {{this.results[1][0].long}},
lat: {{this.results[1][0].lat}}
};
}

dataLayer показывает ошибку: «В типе '{ name: {}; }' отсутствуют следующие свойства типа «DataLayer»: столица, регион, доход, длина, широта».

Подробнее здесь: https://stackoverflow.com/questions/798 ... ponentname