Проблема с тегом <select>в angular5

Question

У меня проблема с тегом <select> в angular 5. У меня есть массив объектов. Допустим,

public countryList = [ {
    'name': 'xxx',
    'capital': 'abc'
  }, {
    'name': 'yyy',
    'capital': 'efg'
  }, {
    'name': 'zzz',
    'capital': 'pqr'
  },
];

и html

    <select placeholder="Select" (change)="displayFunction()">
              <option class="auto-height" *ngFor="let country of countryList; let id=index"
                [disabled]="id === (country .length)-1" [value]="country .name">
                <div class="stop-container">
                    <b>{{country.name}}</b>
                    <p>{{country.capital}}</p>
               </div>
      </option>

Проблема возникает, когда мы выбираем любой параметр в раскрывающемся списке всех значений, перечисленных внутри <option> отображается как скрытое значение. Мне нужно только name в качестве выбранного значения. Любое решение для этого? Я получаю вывод, указанный ниже. Что нужно, это XXX вместо XXX ab c

Answer 1

Вы не можете иметь div внутри вашего варианта. Если вы хотите иметь какое-то специальное форматирование внутри раскрывающегося списка, вы должны воссоздать раскрывающийся список с помощью JS (или использовать, например, angular материал )

Таким образом, чтобы отобразить только имя, вы можете сделать следующее:

<select placeholder="Select" (change)="displayFunction()">
      <option class="auto-height" *ngFor="let country of countryList; let id=index"
                [disabled]="id === (country .length)-1" [value]="country .name">
                {{country.name}}
      </option>
</select>

Answer 2

  <select [(ngModel)]="selectedDevice"  placeholder="Select" (change)="displayFunction($event.target.value)">
                  <option class="auto-height" *ngFor="let country of countryList; let id=index"
                    [disabled]="id === (country.length)-1" [value]="country.name">
                    <div class="stop-container">
                        <b>{{country.name}}</b>
                        <p *ngIf="selectedDevice!=country.name">{{country.capital}}</p>
                   </div>
          </option>
     </select>

Заменить эту строку