Angular 2：如何在选项选择中处理 *ngif答案

【问题标题】：Angular 2: How to handle *ngif in option selectAngular 2：如何在选项选择中处理 *ngif
【发布时间】：2016-11-25 03:30:58
【问题描述】：

如何使用 *ngif 设置特定的默认选择选项？

我需要从数据库中重新加载数据进行编辑，当我检索数据时，我需要将选项的默认值设置为基础存储值。

我有这个：

<select class="form-control" id="deviceModel">
        <option value="">Select a category</option>
        <option *ngFor='let element of category'*ngIf="{{element}}==={{nameDevice}}" value="{{element}}">{{element}}</option>    
    </select>

提前致谢。

【问题讨论】：

标签： angular

【解决方案1】：

ngIf 用于结构操作，基本上是在 DOM 中还是已删除。如果要绑定到选定的属性，可以使用：

<select class="form-control" id="deviceModel">
    <option value="">Select a category</option>
    <option *ngFor='let element of category' [selected]="element === nameDevice" [value]="element">{{element}}</option>    
</select>

来自https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html：

如果你的选项值是简单的字符串，你可以绑定到普通的期权的价值属性。如果您的选项值恰好是对象（并且您希望将表单中的选择保存为对象），请改用 ngValue。

如果你想使用ngModel绑定，看看Binding select element to object in Angular 2

请注意，在使用属性绑定时，不要/不应该使用字符串插值

【讨论】：

【解决方案2】：

我建议您在 ts 或 js 文件中执行此操作，具体取决于您使用的是 typescript 还是 javascript。

我假设当您通过向 API 发送 ajax 请求从数据库加载数据时？使用ngModel绑定模板中的数据（本例为selectedValue）

<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of category" [ngValue]="c">{{c.name}}</option>
</select>

并设置

this.selectedValue = response.value;

在回调函数中。

【讨论】：

【解决方案3】：

<select class="form-control"> <option *ngFor="let area of areaData" value="{{area.id}}" [selected]="area.id == userData.area_id"> {{area.area_name}} ({{area.area_pin}}) </option> </select>

在 Angular 4 中使用 [selected] 作为动态选择字段。

【讨论】：

【解决方案4】：

<select class="select1 minimal" [(ngModel)]="A.SkipTo">
 <option *ngFor="let B of Logic" [selected]="B.Question_text == A.SkipTo">{{B.Question_text}}</option> 
</select>

【讨论】：