Question

我有以下代码来显示选择的国家/地区：

<div class="col">
    <select name="country" id="country" class="form-control" ngModel required>
      <option *ngFor="let country of countries; let i = index" [selected]="country.name.common === 'United States'" [value]="country.name.common">{{country.name.common}}</option>
    </select>
    <img src="/assets/images/icons/chevron-down.svg" alt="Dropdown" class="chevron-icon">
</div>

在初始化时，组件从我的资产文件夹中的JSON文件获取其数据。它有效-显示带有其国家的选择。 我如何确定预先选择的值。

如您所见，我的方法是设置一个带有条件的[selected]，但是它不起作用。将其单独更改为[selected]="country.name.common"，将预先选择列表的最后一个国家/地区。

Answer 1

您必须删除ngModel，因此您的代码应为

<select name="country" id="country" class="form-control" required>
      <option *ngFor="let country of countries; let i = index" [selected]="country.name.common === 'United States'" [value]="country.name.common">{{country.name.common}}</option>
    </select>

Demo

OR

删除selected属性并设置[(ngModel)]="selectedCountry"并在componenet.ts selectedCountry="countryname" Demo

中进行设置

Answer 2

在您的component.ts中使用您选择的名称，并将其分配给所需的值，例如：

countries.map((country) => {
if(country.name.common === 'United States') {
// assign here
}
})

动态选择的选定标签不起作用

2 个答案: