Question

我遇到此错误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">&nbsp;</label>
      <div class="col-sm-10">
          <button type="button" class="btn btn-success fa fa-pencil-square-o"  (click)='editCountry(country)' >&nbsp;Edit</button>&nbsp;
          
      </div>
    </div>
  </div>

这是我的view.component.html

{{1}}

Answer 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">&nbsp;</label>
      <div class="col-sm-10">
          <button type="button" class="btn btn-success fa fa-pencil-square-o"  (click)='editCountry()' >&nbsp;Edit</button>&nbsp;
          
      </div>
    </div>
  </div>

并删除editCountry函数的参数。

editCountry():void{
    /** ... **/
}

角度7中的未定义变量

1 个答案: