Συνδέστε την τιμή json του Angular με τη διαδρομή img

Πρέπει να εμφανίσω δεδομένα που προέρχονται από ένα API που λειτουργεί καλά, χρειάζομαι να εμφανίσω κάθε χώρα με τη αντίστοιχη σημαία της αλλά δεν καταλαβαίνω πώς να συσχετίσω την τιμή ενός JSON με τη διαδρομή μιας εικόνας.

παράδειγμα : για το

ετικέτα: Καμπότζη δίγραμμα: KH

εμφάνιση: src/assets/flags/KH.jpg

libelle: Γαλλία bigramme: FR

εμφάνιση: src/assets/flags/FR.jpg

Έχω προσπαθήσει να είμαι όσο το δυνατόν πιο σαφής.

ευχαριστώ.

json

"drapeaux": [
    {
      "id": 1,
      "mnemo": "KHM",
      "libelle": "Cambodge",
      "bigramme": "KH"
    },
    {
      "id": 2,
      "mnemo": "KHM",
      "libelle": "France",
      "bigramme": "FR"
    }
  ]
}

υπηρεσία

getAll(): Observable<Ipost[]> {
    return this.http.get<Ipost[]>(this.api);
  }

components.ts

 getAllNations() {
    let resp = this.homeService.getAll();
    resp.subscribe(result => {
      this.postArray = result;
    });
  }

html

<div class="col-12">
      <mat-card>
        <div class="row">
          <div class="col-1" *ngFor="let post of postArray">
            {{post.libelle}}
            <img [src]="post.bigramme.jpg" alt="flag">
          </div>
        </div>
      </mat-card>
    </div>

Απάντηση #1

Έχετε δύο επιλογές:

Επιλογή 1: Στην υπηρεσία σας:

getAll(): Observable<Ipost[]> {
  return this.http.get<Ipost[]>(this.api).pipe(
    map(p => ({
      ...p,
      bigramme: `src/assets/flags/${p.bigramme}.jpg`
    }))
  )
}

Και μετά το html του Component σας:

<div class="col-12">
  <mat-card>
    <div class="row">
      <div class="col-1" *ngFor="let post of postArray">
        {{post.libelle}}
        <img [src]="post.bigramme" alt="flag">
      </div>
    </div>
  </mat-card>
</div>

Επιλογή 2: Ή μπορείτε να αλλάξετε μόνο το html του Συστατικού σας:

<div class="col-12">
  <mat-card>
    <div class="row">
      <div class="col-1" *ngFor="let post of postArray">
        {{post.libelle}}
        <img src="src/assets/flags/{{ post.bigramme }}.jpg" alt="flag">
      </div>
    </div>
  </mat-card>
</div>