angular 2选择具有对象值的选项

Question

从API获取对象值列表，在对象内部有一个用于标识所选项目的属性 我能够绑定项目列表以查看

这里是json数据

这是我的代码：

   <select class="form-control"  name="Underwriter">
 <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" >{{underwriter.text}}</option>
  </select>

以任何方式制作所选项目？

Answer 1

您只需在选择中添加[selected]，然后检查underwriter哪个selected属性为true。

像这样：

 <select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
     <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" [selected]="underwriter.selected == true">{{underwriter.text}}</option>
 </select>

所以只需添加：

[selected]="underwriter.selected == true"

简化plunker

Answer 2

在你的问题中，你说你要“制作”所选的项目，我认为这意味着设置它。我就是这样做的，但可能还有其他更好的方法。

您需要在选项标记

中设置[attr.selected]

 <select class="form-control"  name="Underwriter">
 <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value"  [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
  </select>

然后，当WebService API返回结果时，您需要设置underwriterTextString代码。

如果underwriter.text不起作用，请尝试underwriter.value

但是，在下面的评论中，您现在说要“获取”所选项目。这可以通过使用select标记

中的更改事件来完成

 <select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
     <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value"  [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
      </select>

然后在你的代码中你需要这样的东西;

onChangeunderwriter(event) {

//the value will be set in event.target.value;


  }