角度/HTML:选择默认值无效

Question

我有这个小问题。我做了一个选择框，我希望在我的选择框中始终选择第一个元素，并且此选项字段中的更改对角度有效。目前我使用一个无用的空默认字段，只有在我选择真正的选项后，更改才有效。

<div class="form-group">
        <label class="form-control-label" jhiTranslate="wisatApp.threat.impact" for="field_impact">Impact</label>
        <select class="form-control" id="field_impact" name="impact" [(ngModel)]="threat.impact" >
           <option [ngValue]="null"></option>
            <option [ngValue]="impactOption.id === threat.impact?.id ? threat.impact : impactOption" *ngFor="let impactOption of impacts | threatImpactFilter:secObj.value.toString():imValue.value.toString() ; trackBy: trackImpactById">{{impactOption.id}}</option>
        </select>
</div>

我

试图解决第二个选项中的关键字"选定"的问题，我删除了第一个选项，但它不起作用。无论什么变化在角度上都无效

<div class="form-group">
        <label class="form-control-label" jhiTranslate="wisatApp.threat.impact" for="field_impact">Impact</label>
        <select class="form-control" id="field_impact" name="impact" [(ngModel)]="threat.impact" >
            <option [ngValue]="impactOption.id === threat.impact?.id ? threat.impact : impactOption" *ngFor="let impactOption of impacts | threatImpactFilter:secObj.value.toString():imValue.value.toString() ; trackBy: trackImpactById" selected >{{impactOption.id}}</option>
        </select>
</div>

多谢！

Answer 1

希望你能从中得到基本的想法

<div class="form-group">
        <label class="form-control-label" for="field_impact">Impact</label>
        <select class="form-control" id="field_impact" name="impact" [(ngModel)]="threat.impact">
         <option *ngFor="let impactOption of impacts" [value]="impactOption.id"  >{{impactOption.id}}</option>
        </select>
</div>

在 TS 文件中

public threat:any={};
public impacts :any[] = [{id:1},{id:2},{id:3}];
constructor() { 
  this.threat.impact = this.impacts[0].id;
}

[注意] 我已经制作了虚拟数据并删除了过滤器，以使其对我的测试目的变得简单。您可以添加必要的过滤器。