0

I have this small Problem. I made a select box and I would like to have, that in my select box the first element is always selected and that changes in this Option field are effective for angular. at the Moment I use a useless empty Default field and only after i select the real Option, the changes are effective.

<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>

I tried to solve the Problem with the Keyword "selected" in my second Option and I delete the first Option but it does not work. Whatever the changes are not effective in angular

<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>

thank you much!

KSV97
  • 27
  • 8

1 Answers1

0

Hope you will get basic idea from this

<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>

In TS file

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

[Note] I have made dummy data & remove filters to make it simple for my test purpose. You can add your necessary filters.

Arnaf Aziz
  • 587
  • 4
  • 6
  • thanks for your solution. but how can i get the first element of the filtered array? in your solution i get the first element of the the whole list. am i right? – KSV97 Jan 08 '18 at 20:11
  • Yes first element of the whole list. Inside the constructor you can make a new copy of the main list then flter the new copied list as your required filtered method. You can also use your filters(pipe) inside component. Follow this https://stackoverflow.com/questions/35144821/angular-use-pipes-in-services-and-components – Arnaf Aziz Jan 08 '18 at 21:11