来自http调用的Angular未定义对象

我有一个问题，可能对你们大多数人来说很容易和明显，但我花了很多时间在这个问题上，我决定我需要帮助。

我正在从frontendmentor建立一个简单的项目。IO和被困在一个功能上。

所以一个接一个:

应用程序的第一步，有一个HTTP请求从服务器获取数据并显示它。我使用主组件来获取数据，并将数据传递给子组件作为列表元素。单击单个元素后，将导航到具有更多详细信息的另一个组件。在这个组件中，首先我从url获取参数，然后发出另一个请求，但不是元素的完整列表，我只从服务器接收一个元素。

现在节目必须继续。我的模板没有显示任何数据，我不知道什么是错的。

数据模型model:

export interface Country {
borders: string[];
capital: string;
cca3: string;
currencies: {
[key: string]: {
name: string;
symbol: string;
}
}
flags: {
alt: string;
png: string;
svg: string;
};
languages: {
[key: string]: string;
};
name: {
common: string;
nativeName: {
[key: string]: {
common: string;
}
};
};
population: number;
region: string;
subregion: string;
tld: string;   
}

服务:

export class CountriesService {
constructor(private http: HttpClient){}
getCountries(): Observable<Country[]> {
return this.http.get<Country[]>('https://restcountries.com/v3.1/independent?status=true&fields=name,nativeName,population,region,subregion,capital,tld,currencies,languages,borders,flags,cca3');
}
getSingleCountry(countryName: string): Observable<Country> {
return this.http.get<Country>('https://restcountries.com/v3.1/name/'+countryName+'?fullText=true&fields=name,nativeName,population,region,subregion,capital,tld,currencies,languages,borders,flags,cca3');
}
}

和components .ts文件的一部分:

export class CountryDetailComponent implements OnInit{
param!: string;
country!: Country;
constructor(
private route: ActivatedRoute,
private cs: CountriesService
) {}
ngOnInit(): void {
this.route.params.subscribe((params) => {
this.param = params['country'];
});
this.cs.getSingleCountry(this.param).subscribe(result => {
this.country = result;
console.log(this.country);
});
}

要在模板中显示，我使用插值。对我来说最奇怪的是，在控制台对象是正确的，但所有的模板是空的。我不知道我做错了什么。

我也试过用所有对象的元素做一个请求，并把它保存到一个服务中，并在整个应用程序中使用这个列表的全局实例，但我遇到了一些麻烦，我决定做更简单的解决方案

编辑:Html组件模板代码:

<div class="country-detail content-wrapper">
<div class="container">
<div class="button-section">
<button (click)="returnToList()">
<fa-icon [icon]="faArrow"></fa-icon> Back
</button>
</div>
<div class="details-section">
<div class="details-section__flag">
<img src="{{country.flags.svg}}" alt="">
</div>
<div class="details-section__content">
<h2>{{country.name.common}}</h2>
<div class="details-section__content--middle">
<div class="left">
<p><span class="bold">Native Name: </span>{{nativeNameArray}}</p>
<p><span class="bold">Population: </span>{{country.population}}</p>
<p><span class="bold">Region: </span>{{country.region}}</p>
<p><span class="bold">Sub Region: </span>{{country.subregion}}</p>
<p><span class="bold">Capital: </span>{{country.capital}}</p>
</div>
<div class="right">
<p><span class="bold">Top Level Domain: </span>{{country.tld}}</p>
<p><span class="bold">Currencies: </span>{{currencyArray}}</p>
<p><span class="bold">Languages: </span>{{languageArray}}</p>
</div>
</div>
<div class="details-section__content--bottom">
<p><span class="bold">Border Countries: </span><span class="border" *ngFor="let border of borderCountries" (click)="navigateToCountry(border)">{{border}} </span></p>
</div>
</div>
</div>
</div>

请不要注意类名或附加变量或函数-有一堆实验

正常，http调用后触发路由事件

用这个逻辑代替

export class CountryDetailComponent implements OnInit{
protected country?: Country;
constructor(
private _activatedRoute: ActivatedRoute,
private _countriesService: CountriesService
) {}
ngOnInit(): void {
this.route.params.pipe(
map((params) => params['country']),
switchMap((country: string) => this._countriesService.getSingleCountry(country))
).subscribe(country => {
this.country = country;
});
}
}

我没有复制的假设是，您正在尝试并行地进行两个异步调用-首先，获取参数，然后加载国家详细信息。以下是我的修改建议

更改CountryDetails模板(我已经添加了异步订阅)

<div class="country-detail content-wrapper">
<div class="container" *ngIf="country$ | async as country">
<div class="details-section">

根据路由信息初始化国家

export class CountryDetailComponent implements OnInit {
country$: Observable<Country>;
constructor(
private route: ActivatedRoute,
private cs: CountriesService
) {
this.country$ = this.route.params.pipe(
switchMap(param => this.cs.getSingleCountry(param['country']) )
)
}
}

如果不工作，请修改此stackblitz以重现问题

谢谢大家的帮助，我自己找到了解决办法。问题是，我从服务器响应收到1元素数组而不是单个对象。最简单的做法是将服务中的可观察对象类型更改为Country[]，并分配result[0]。

相关内容

最新更新

热门标签：