Angular9 - проблема @Input декоратора - PullRequest
0 голосов
/ 20 апреля 2020

Я настроил следующее взаимодействие родительских и дочерних компонентов с помощью декоратора @Input. Но это не похоже на работу. Может кто-нибудь, пожалуйста, помогите мне с этим?

Родительский файл TS:

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

import { Covid19Service } from '../services/get-covid19-data';

@Component({
   selector: 'app-countries',
   templateUrl: 'countries.component.html',
   styleUrls: ['countries.component.css']
})

export class CountriesComponent implements OnInit {

   constructor(private covid19Service: Covid19Service) { }

   countries: Array<string> = [];
   countriesCount: Number;
   selectedCountry: string = 'Sample';


   ngOnInit() {
     this.covid19Service.getCountries().subscribe(data => {
        this.countriesCount = data['affectedCountries'];
        this.countries = data['countries'];
     });
   }

  countrySelected(country: string) {
    this.selectedCountry = country;
    console.log(`Selected Country from Parent: ${this.selectedCountry}`);
    /*         console.log(`Clicked on : ${country}!`);
            this.covid19Service.getCountry(country).subscribe(data => {
                console.log(`${JSON.stringify(data)}`);
            }); */
}
}

Родитель HTML:

<div>
<li *ngFor="let country of countries">
    <span class="badge" (click)="countrySelected(country)">{{country}}</span>
</li>
</div>
<app-country [country]="selectedCountry"></app-country>  

Дочерний файл ts:

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-country',
  templateUrl: 'country.component.html',
  styleUrls: ['country.component.css']
})
export class CountryComponent implements OnInit {
  @Input() country: string;

  ngOnInit() {
    console.log(`Selected Country in Child: ${this.country}`);
  }
 }  

Дочерний HTML-файл:

<p>Country component works!</p>
<p>This is the selected Country: {{country}}</p>  

Приведенный выше код с использованием компонента @Input не работает. Может кто-нибудь помочь мне с этим? Я довольно новичок в Angular, и я потерян. Любая помощь будет оценена

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...