Bootstrap 在 Select Angular 4 上的 4 PlaceHolder答案

【问题标题】：Bootstrap´s 4 PlaceHolder on Select Angular 4Bootstrap 在 Select Angular 4 上的 4 PlaceHolder
【发布时间】：2018-03-27 19:46:48
【问题描述】：

我使用 ngModel 指令和 Bootstrap 框架创建了一个带有动态值的 Select，它可以工作。我的问题是我想添加一个占位符，但 ng 指令似乎破坏了它。

这是我所拥有的：

   <select [(ngModel)]="usuario.pais" name="s" class="form-control">
     <option value="">Select a Country</option><!--My PlaceHolder-->
     <option *ngFor="let pais of paises" value="pais.codigo">{{pais.nombre}}</option>
   </select>

有什么建议吗？

【问题讨论】：

哪个指令不起作用？！我认为这里的值应该在括号中：<option *ngFor="let pais of paises" [value]="pais.codigo">...
而且我认为引导程序中没有选择，有一个下拉菜单：https://ng-bootstrap.github.io/#/components/dropdown/examples
应该用作占位符，而不是显示它，它似乎是空白的。指令和价值观完美运作
还有：您选择的部分是form 还是ngForm？你包括import { FormsModule } from '@angular/forms';
那么，usuario.pais中pais引用的对象是否匹配[value]="pais.codigo"

标签： html angular bootstrap-4

【解决方案1】：

也许试试这个：在 TS 中：

public usuario = {pais: ''};

public paises = [{nombre: 'la France', codigo: 'fr'}, {nombre: 'deutscheland', codigo: 'de'}];

在 HTML 中：

<select [(ngModel)]="usuario.pais" name="s" class="form-control">
  <option value="">Select a Country</option>
  <option *ngFor="let pais of paises" [value]="pais.codigo">
    {{pais.nombre}}
  </option>
</select>

【讨论】：

如果我在 stackblitz 中尝试这个，它可以工作 - 最初显示 Select a Country...
我假设您在usuario 中的pais 不是字符串类型？（比如codigo的类型）
完美运行！谢谢
很高兴为您提供帮助。我知道选择的痛苦！ :)