javascript - 如何在Angular中过滤和显示关于文本的图像

Question

我想显示资产文件夹中关于我在 API 响应中得到的国家代码的标志图像。

HTML:-

<div class="details_container" *ngFor="let contacts of keycontact">
    <img src="../../../../assets/images/flags/usa.jpg" class="logo">
    <p class="name_font font_white">{{contacts.purpose}}</p>
    <p class="name_font font_white">{{contacts.contactNumber}}</p>
</div>

组件文件：-

ngOnInit(): void {

  //initialize
  this.keycontact = this.keyContactService.getKeyContacts()

    //Subscribe
    this.keyContactService.updatedkeyContacts.subscribe((contacts)=>{
      this.keycontact = contacts
      console.log(this.keycontact);
    })

    // Api Call
    this.keyContactApis.fetkeyContDetails();
  }

回应为：-

    {
                "id": 28,
                "purpose": "HR related queries",
                "contactNumber": "[phone]",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "US",
                "workCity": "US",
                "beforeFlip": "NULL",
                "initials": "HR"
            },
{
                "id": 29,
                "purpose": "HR related queries",
                "contactNumber": "[phone]",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "IND",
                "workCity": "IND",
                "beforeFlip": "NULL",
                "initials": "HR"
            }

响应是动态的，对象更多。我如何选择密钥并检查 text = US 或 IND 或更多其他国家/地区，并相应地在 HTMLregion中传递标志图像路径？<img>

标签： javascripthtmlangular

Answer 1

您可以像在 p 标签中那样使用Angular Intepolation ：

<p class="name_font font_white">{{contacts.purpose}}</p>

所以你的 img 标签看起来像这样：

<img src="../../../../assets/images/flags/{{contacts.region}}.jpg" class="logo">

编辑

使用Property Bindng，您可以使用以下方法动态获取文件：

<img [src]="getFlag(contacts.region)" class="logo">

并在您的 .ts 文件中声明一个方法：

public getFlag(region: string): string {
    // your logic
}