انگولار مقدار JSON را به مسیر تصویر مرتبط میکند

من باید دادههایی را که از یک API که به خوبی کار میکند میآید نمایش دهم، من نیاز دارم هر کشور را با پرچم مربوطهاش نمایش دهم اما نمیفهمم چگونه مقدار یک JSON را با مسیر یک تصویر مرتبط کنم.

مثال: برای

برچسب: کامبوج بیگرام: KH

نمایش: src/assets/flags/KH.jpg

برچسب: فرانسه دوحرفی: FR

نمایش: src/assets/flags/FR.jpg

من سعی کردم تا حد امکان واضح باشم.

متشکرم.

جسون

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

اچتیامال

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

پاسخ شماره ۱

شما دو گزینه دارید:

گزینه ۱: در خدمت شما:

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

و سپس 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" alt="flag">
      </div>
    </div>
  </mat-card>
</div>

گزینه ۲: یا میتوانید فقط 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>