angular - 将 ngfor 值传递给图像

Question

我的 JSON 字符串值如下所示，我正在将国家名称加载到 Select 控件中。这工作正常，现在无论何时选择一个国家，相关图像都应传递给 IMG 标签示例，如果选择国家印度，则图像应该是这样的

<img src="india.png">

如果选择了英格兰，那么图像标签应该

<img src="hello.png"> 

下面是我从 Web 服务调用中获得的 JSON 值。

[{
"Name": "England ",
"ImageFile": hello.png,
"Id": 1
},
{
"Name": "South Africa",
"ImageFile": test.png,
"Id": 2
}, 
{
"Name": "India",
"ImageFile": india.png,
"Id": 2
}]

在 Dart 中，我编写了获取 Country Id 的函数，该值在 dart 函数中正确出现。现在我需要根据所选国家更改图像值

   <label style="alignment: center" for="countries">Country
        <select class="form-control" id="countries" *ngIf="sCountries.length > 0" [ngModel]="0" (ngModelChange)="selectCountry($event)">
            <option value="0">All</option>
            <option *ngFor="let country of sCountries" value="{{country['Id']}}">{{country['Name']}}</option>
        </select>
    </label>

谁能帮我。

Answer 1

您可以将整个国家/地区对象与 ngModel 绑定(bind)，这不需要您手动遍历循环来获取选定的国家/地区对象。双向绑定(bind)功能强大。

<label style="alignment: center" for="countries">Country
    <select class="form-control" id="countries" *ngIf="sCountries.length > 0" [(ngModel)]="selectedCountry">
        <option *ngFor="let country of sCountries" [value]="country">{{country['Name']}}</option>
    </select>
</label>

<ng-container *ngIf="selectedCountry"> 
    <img [src]="selectedCountry.ImageFile">
</ng-container>