如何解决角度7中的未定义变量
我遇到此错误 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]);
});
}
}
我不知道该怎么做,我知道这里有一个未定义的国家/地区变量,但是我在哪里设置变量以及如何设置?这是我的view.component.ts
<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>
<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>
</div>
这是我的view.component.html
{{1}}
解决方法
在您看来,您正在将变量country
传递给函数editCountry
。但是,它不存在。另外,由于您使用的是country$
函数中可观察到的editCountry
,因此您不需要它。
只需将其从HTML中删除
<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>
<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()' > Edit</button>
</div>
</div>
</div>
并删除editCountry
函数的参数。
editCountry():void{
/** ... **/
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。