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 选择然后....我将来应该能够扩展数组。

标签： javascriptangulartypescript

Answer 1

您可以使用ngValue而不是使用ngFor. 你可以参考这个答案。 这是工作示例。

你的代码变成

<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>