javascript - 如何在下拉列表中显示实际值并可能设置此列表中的其他选项

Question

如何从下拉列表中显示实际选择的选项，并在拉伸(stretch)列表后显示其他可用元素。现在我的下拉列表只有可用的元素，我可以选择元素。HTML:

        <div class="pb-1">
          <label class="small">Car:</label>
          <select formControlName="Car" class="form-control">
              <option *ngFor="let x of cars" [ngValue]='x.id'>{{x.id}} : {{x.carName}}</option>
          </select>
        </div>

typescript :

export class PersonDetailsComponent implements OnInit {
 cars : Car[];
.
.
.
populateCars()
{
  this.personsService.getCars().subscribe(result => {
    this.cars = result;
});
}

人员服务:

getCars() :Observable<Car[]>
    {  
        return this.http.get(this.apiUrl + 'AviableCars')
                        .map((result)=>result.json());
    };

Answer 1

您需要使用 [selected] 属性。我还会添加一个“请选择”默认选项:

<option value="" disabled selected> <!-- default selected -->
  Please select a car
</option>
<option *ngFor="let x of cars" [ngValue]='x.id' [selected]="Car.id === x.id">
  {{x.id}} : {{x.carName}}
</option>

[selected] 属性需要一个计算结果为 true 或 false 的表达式。如果为真，它将在列表中突出显示该项目 (x.id)。

所以这里检查 Car.id(来自您的模型)是否与 *ngFor 中的 x.id 匹配 - 因此将为 ngFor 中的每个 x 计算表达式，并且其中之一当然应该为真。

更多信息 here和 here