Angular 2设置选择的开始值[重复]

Posted 2023-03-05

【中文标题】Angular 2设置选择的开始值[重复]

【英文标题】：Angular 2 Set begin value of select [duplicate]

【发布时间】：2016-08-11 21:56:30

【问题描述】：

这是我的选择代码：

   <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
       <option *ngFor="#p of prototypes" [value]="p.selector">
              p.selectorName 
       </option>
   </select>

如何为这个 select option 设置标准开始值我想我必须设置这个变量：

 selectedPrototypeSelector: string;

对此：selectedPrototypeSelector: string = "Test";

但是"Test" 没有在选择框中首先显示开始值为空，我该如何设置例如：选择您的选项。

这里是PLUNKER，

正如你所见，当我设置值 p.selector 时，选择框是空的，第二次选择时我设置 constraint 的值也是如此：

 <select class="form-control" [(ngModel)]="expression.constraint">
     <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
          constraint 
     </option>
 </select>

我想将每个选择框的开始值设置为静态string = "Select an option";

【问题讨论】：

默认值应该是多少？它从何而来？组件类的属性或一些静态字符串值？

@GünterZöchbauer 这只是一个静态字符串值我编辑了我的问题

我更新了答案。

【参考方案1】：

它应该可以正常工作，请参阅plunkr。您要么在 p.selector 中有非字符串值，要么是拼写错误 -> [value]="p.selectorName"。

【讨论】：

这不是一个拼写错误，因为它们p.selector 和p.selectorName 都是字符串在这里你可以看到plunker 链接以获得更好的视图：plnkr.co/edit/2soqqn?p=preview

您必须初始化selectedPrototypeSelector，但它从未被分配。见plunkr。

这可行，但我想将其设置为“选择一个选项”的字符串值，看看这个 plunker：plnkr.co/edit/ffT5b8?p=preview

Select 只能在未选择任何内容时显示为空白，如果选择了选项，则显示已选择的选项值。唯一的方法是添加带有文本“选择一个选项”的假选项。检查这个answer

你能在我的插件中编辑这个吗？

【参考方案2】：

这适用于ngValue

<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
   <option *ngFor="let p of prototypes" [ngValue]="p">
          p.id 
   </option>
</select>    

只需将selectedPrototypeSelector 设置为您想要选择的值。

Plunker example

【讨论】：

它在这里不起作用一个 plunker 链接：plnkr.co/edit/2soqqn?p=preview 它抛出了这个错误：EXCEPTION: Template parse errors: Can't bind to 'ngValue' since it isn't a known native property

我无法复制，但我也找不到正在使用的ngValue。该错误可能是由于最近引入了 beta.14 而不是 beta.15 (ngValue) 引起的。 （只需将index.html中的所有.14更改为.15

嗯它无法读取属性[1]：plnkr.co/edit/kUDkD9?p=preview

您需要将代码从构造函数移动到ngOnInit()。执行构造函数时尚未设置输入。 plnkr.co/edit/Q53Q9L?p=preview

只有它会为ngModelChange 抛出错误我认为这样设置它是一个更好的计划：this.selectedPrototypeSelector = "Select option"; 我该如何设置？