Wie konvertiert man eine Nummer eines Webservices in eine Zeichenkette eines anderen Webservices?

Ich habe einen Webdienst, der => und Yearanzeigt.CountryNational register

Hier ist der 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',
 },
 );
}

Komponente.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>

Mein Problem ist, dass ich den 4Wert durch den Namen eines Landes ersetzen möchte. Ich muss einen anderen WebService zum Konvertieren verwenden.

Normalerweise ist der folgende Code richtig...

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 [];
 }
 })
 );
}

land.ts

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

Ich habe eine console.log gemacht, ich rufe die Länder ab

Komponente.ts

In der ngOnInit():Methode habe ich Folgendes hinzugefügt:

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);
 }

Ich verstehe nicht, wie ich die HTML-Datei jetzt ändern muss?

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

Vielen Dank

BEARBEITEN

Lösung des Problems

Angenommen, das wird this.country = this.activatedRoute.snapshot.paramMap.get('country');bewertet als 4...

Ich würde folgende Änderung vornehmen:

// 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;
 }
});

Und dann in Ihrer Vorlage:

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