Angular 5在页面加载时显示与模型匹配的选择列表选项

Question

我正在编写一个只读表单，它显示在页面加载时检索到的一组数据。表单上的一个部分是一个 IsActive 下拉列表，其值为 True 或 False。在 ngOnInit 上，我从数据库中检索这个 IsActive 布尔值并将其与我的模型属性 isActive 绑定。我想用匹配的下拉值显示这个模型值。因此，例如，如果 IsActive 标志为 true，我希望在页面加载时从下拉列表中选择 true 选项。

HTML：

<label class="col-md-2 col-form-label">Is Active</label>
    <div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
            <option [value]="1">True</option>
            <option [value]="0">False</option>
        </select>
    </div>

然而，上面的代码在页面加载时有一个空白的选择选项，只有在点击时才会显示真假选项

Answer 1

你可以试试它的工作原理

option : any = [];
selectedAccount: any;
ngOnInit(){
this.selectedAccount.isActive = true;
this.option = [{"name": "true", value: true}, {name: "false", value: false}]
this.option.map(res =>{ if (res.value == this.selectedAccount.isActive){
  this.selected = res
}
});

}

<div class="col-md-10">
        <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="selectedAccount.isActive" [disabled]="!isEditable">
        <option *ngFor="let option of selected" value={{option.value}}>{{option.name}}</option>
        </select>
    </div>