angular5 中 <select> 标签的问题

Question

我在 angular 5 中遇到 <select> 标签的问题。我有一组对象。让我们说

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>

当我们 select 下拉列表中的任何选项 <option> 中列出的所有值都显示为选定值时，问题就出现了。我只需要 name 作为 selected 值。有什么解决办法吗？我得到下面给出的输出。需要的是 XXX 而不是 XXX abc

Answer 1

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

替换此行

Answer 2

您的选项中不能有 div。如果你想在下拉列表中有一些特殊的格式，你必须用 JS 重新创建下拉列表（或者使用，例如，angular material）

所以只显示名称，您可以执行以下操作：

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

angular5 中 <select> 标签的问题

Issue with <select> tag in angular5

html

angular5