Javascript 如何过滤和显示与文本相关的图像

我想显示来自资产文件夹的关于国家代码的标志图像，这是我在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": "+1 201-350-8620",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "US",
                "workCity": "US",
                "beforeFlip": "NULL",
                "initials": "HR"
            },
{
                "id": 29,
                "purpose": "HR related queries",
                "contactNumber": "+91 995-350-8620",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "IND",
                "workCity": "IND",
                "beforeFlip": "NULL",
                "initials": "HR"
            }

响应为：-

<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": "+1 201-350-8620",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "US",
                "workCity": "US",
                "beforeFlip": "NULL",
                "initials": "HR"
            },
{
                "id": 29,
                "purpose": "HR related queries",
                "contactNumber": "+91 995-350-8620",
                "contactPerson": "Abhishek  Kaashyap",
                "location": "NA",
                "employeeSubsidiary": "LLC",
                "region": "IND",
                "workCity": "IND",
                "beforeFlip": "NULL",
                "initials": "HR"
            }

对于更多的对象，响应是动态的。我如何选择

区域

键并检查text=US或IND或更多其他国家/地区，并相应地在HTML中的

中传递标志图像路径？

您可以使用您在p标记中所做的操作：

{{contacts.purpose}

因此，您的img标签可以如下所示：

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

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

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

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

---

您可以使用映射维护一个常量文件，并使用该文件获取url

常数

class Constants

public static flagImageNames = {
    'usa': 'us',
    'can': 'can',
    ...
}

ts

html

---

不，事实并非如此。在响应中，我得到了

{{contacts.region}

。所以在HTML中，我将如何做一些逻辑，比如，如果地区是“美国”，那么从资产文件夹中选择美国国旗图像，如果地区是“印度”，那么印度国旗图像路径将从资产文件夹中选择..其他国家也是如此？