Question

<div class="form-group">
  <label class="col-md-4 control-label" for="is_present">Is Present?</label>
  <div class="col-md-4">
    <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
      <option value="true">Yes</option>
      <option value="false">No</option>
    </select>
  </div>
</div>

我的html组件中有这个代码。我从API收到一个布尔数据，如果API数据为true或false，我想知道在*ngIf标记中使用selected添加option的最佳方式。

Answer 1

略微改为Rahul的答案，因为根据我的理解，你收到的布尔值不应该与candidates.is_present相同。因此，将布尔值存储到变量中，例如bool，然后在选择中放置[(ngModel)]="bool"：

<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
  <option value="true">Yes</option>
  <option value="false">No</option>
</select>

Answer 2

只需使用 candidates.is_present

即可

<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
      <option value="true">Yes</option>
      <option value="false">No</option>
 </select>

并在TS文件中

if(candidates.is_present){
   this.defaultValue = 'Yes';
}else
{ 
   this.defaultValue = 'No';
}

Answer 3

我可以从问题中理解你想根据一些candidate.is_present选择选择框中的值。所以在这里你需要使用[（ngModel）] =“candidates.is_present”绑定数据，并确保在你的导入中包含FormsModule。当我们希望我们的元素根据某些条件删除/添加到dom时我们使用* ngIf。你得到了答案

Angular 2 ngIf选择框

3 个答案: