javascript - 我需要根据我的代码中数组中选择的选项动态打印国家

Question

我需要简单的代码帮助。如果我选择任何特定的字母，那么应该显示相应的国家，在我目前的位置我无法动态地做到这一点。例如，如果我选择字母 A，则与这些国家相关的国家应显示在选择之外。

<select [(ngModel)]="selectedOption">
        <option *ngFor="let o of options">
          {{o.letter}}
        </option>
      </select>

<p *ngFor="let o of options">Countries are: {{ o.countries }}</p>

export class AppComponent {
  selectedOption: string;

  options = [
    { letter: "A", countries: ["Afghanistan", "Albania", "Argentina"] },
    { letter: "B", countries: ["Bangladesh", "Bahamas", "Bahrain"] }
  ]

}

如果选择 A，那么阿富汗阿尔巴尼亚....如果选择 B，那么......如果选择 C ​​那么....我将来应该能够扩展阵列。

Answer 1

您可以使用 ngValue 而不是使用 ngFor。可以引用this回答。 Here是工作示例。

你的代码变成了

<select [(ngModel)]="selectedOption">
  <option *ngFor="let o of options" [ngValue]="o">
    {{o.letter}}
  </option>
</select>

<!-- Just to debug and display selected object -->
{{selectedOption | json}} 

<p>{{selectedOption.countries}}</p>