I encountered an error message that says
Property 'country' does not exist on type 'ViewComponent'. Did you mean 'country$'?I'm at a loss on how to resolve this issue. I understand that there is an undefined variable called country, but I'm unsure where and how to set this variable. Below is the code snippet from my view.component.ts file:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Country } from '../models/country';
import { CountryService } from '../services/country.service';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
country$:Observable<Country>;
constructor(
private route:ActivatedRoute,
private router:Router,
private countryService:CountryService) { }
ngOnInit() {
this.country$ = this.route.paramMap.pipe(
switchMap((params: ParamMap)=>
this.countryService.getCountryById(Number.parseInt(params.get('countryID')))
));
}
editCountry(country:Country):void{
this.country$.subscribe(country =>{
console.log('edit clicked');
this.router.navigate(['countries/edit/'+country.countryID]);
});
}
}
Additionally, below is the code snippet from my view.component.html file:
<label for="" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<label for="" class="col-sm-12 col-form-label">{{(country$ | async).countryName}}</label>
</div>
<div class="form-group row">
<label for="" class="col-sm-2 col-form-label"> </label>
<div class="col-sm-10">
<button type="button" class="btn btn-success fa fa-pencil-square-o" (click)='editCountry(country)' > Edit</button>
</div>
</div>