Comment convertir un numéro d'un webservice en une chaîne de caractères d'un autre webservice ?

J'ai un service Web qui affiche = > Yearet Country.National register

Voici le code

service.ts

getDta(obj: SearchDta): Observable < SearchDtaResponse > {
 return this.http.post < SearchDtaResponse > (this.api + `/DTA`, {
 REGISTRENAT: obj.registreNational,
 EXERCICE: obj.fiscalYear,
 PAYS: obj.country,
 MODE: 'D',
 },
 );
}

composant.ts

 registreNational: string | null = null;
 country: string | null = null;
 fiscalYear: string | null = null;
 countries: Country[] = []; 
 ngOnInit(): void {
 this.registreNational = this.activatedRoute.snapshot.paramMap.get('registreNational');
 this.country = this.activatedRoute.snapshot.paramMap.get('country');
 this.fiscalYear = this.activatedRoute.snapshot.paramMap.get('fiscalYear');
 if (!this.registreNational ||!this.country ||!this.fiscalYear) {
 this.goBack();
 return;
 }
 this.getDta();
 }
 private getDta(): void {
 let searchDta = new SearchDta(parseInt(this.registreNational + ''), parseInt(this.fiscalYear + ''), parseInt(this.country + ''));
 this.service.getDta(searchDta).pipe(
 takeUntil(this.unsubscribe$)
 ).subscribe(res => {
 if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
 this.dta = res.DTA;
 }
 });
 }

HTML

<tr>
 <th>Year</th>
 <td>{{ fiscalYear }}</td>
</tr>
<tr>
 <th>Country</th>
 <td>{{ country }}</td>
</tr>
<tr>
 <th>National register</th>
 <td>{{ registreNational }}</td>
</tr>

Mon problème est que je veux remplacer la 4valeur par le nom d'un pays. Je dois utiliser un autre WebService pour convertir.

Normalement, le code ci-dessous est correct...

service.ts

...

getPaysDta(): Observable < Country[] > {
 return this.http.post < SpecificParametersResponse > (this.api + `/TXT`, {
 CODE: "PAYS_DTA",
 ID: 1,
 LISTEBOOL: "TRUE"
 }).pipe(
 map(res => {
 if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
 return res.TEXTE.LISTE.map(item => {
  console.log("Countries => " + JSON.stringify(res.TEXTE.LISTE));
  return {
  id: item.CODE,
  name: item.COURT
  }
 });
 } else {
 return [];
 }
 })
 );
}

pays.ts

export class Country {
 id: string;
 name: string;
}

j'ai fait un console.log, je récupère les pays

composant.ts

Dans la ngOnInit():méthode, j'ai ajouté ceci:

this.service.getPaysDta().pipe(
 takeUntil(this.unsubscribe$)
).subscribe((countries) => this.countries = countries);

...

 ngOnInit(): void {
 this.registreNational = this.activatedRoute.snapshot.paramMap.get('registreNational');
 this.country = this.activatedRoute.snapshot.paramMap.get('country');
 this.fiscalYear = this.activatedRoute.snapshot.paramMap.get('fiscalYear');
 if (!this.registreNational ||!this.country ||!this.fiscalYear) {
 this.goBack();
 return;
 }
 this.getDta();
 this.service.getPaysDta().pipe(
 takeUntil(this.unsubscribe$)
 ).subscribe((countries) => this.countries = countries);
 }

Je ne comprends pas comment je dois modifier le fichier HTML, maintenant?

<tr>
 <th>Country</th>
 <td>{{ country }}</td>
</tr>

Merci beaucoup

ÉDITER

Solution du problème

En supposant que cela this.country = this.activatedRoute.snapshot.paramMap.get('country');s'évalue comme 4...

Je ferais la modification suivante:

// new prop
selectedCountry: Country;
// update this
this.service.getPaysDta().pipe(
 takeUntil(this.unsubscribe$)
).subscribe((countries) => {
 this.countries = countries;
 // get your selected country
 let selectedCountry = this.countries.find(c => c.id == this.country);
 if(selectedCountry){
 this.selectedCountry = selectedCountry;
 }
});

Et puis dans votre modèle :

<tr>
 <th>Country</th>
 <td>{{ selectedCountry.name }}</td>
</tr>