Angular 4 - Reactive Forms - select an item in the list from an object not specified in this list - track list?

Question

I am converting Angular 1.6 code to Angular 4 and I have a problem with a list of elements. Code in Angular 1.6:

<select ng-model="$ctrl.level" ng-options="item as item.label for item in $ctrl.referentiel.levels | orderBy : 'index' track by item.id"                                   id="childLevel" name="childLevel" class="size-xl"                               >
<option value="">Select</option>
</select>

The object level is not listed on my list because this list is loaded using the referentiel.levels object. But the correspondence between the elements of my list and my Level object is satisfied thanks to the trackby. Therefore, when my Level object is loaded, the item is selected in the list.

Now I am trying to convert this code using Reactive Forms. In my HTML code, I have:

<select formControlName="levelControl" id="levelSelect" name="levelSelect" class="size-xl">
<option [ngValue]="null">Select</option>
<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level">{{level.label }}</option>
</select>

And in my component, I have an OnInit method:

(<FormControl>this.myForm.controls.levelControl).setValue(this.level);

And the identification method is simple:

identify(index,item){
   return item.id;
}

. , .

, , . - HTML:

<option *ngFor="let level of referentiel.levels;trackBy:identify" [ngValue]="level.id">{{level.label }}</option>

typescript :

(<FormControl>this.myForm.controls.levelControl).setValue(this.level.id);

, : .

Angular. , - ...

.

Answer 1

, trackBy , . , .

level.id, (?), level - , , .

Angular 4, [compareWith], - level, id. . , , :

<select formControlName="levelControl" [compareWith]="compare" 
  id="levelSelect" name="levelSelect" class="size-xl">
    <option value="">Select</option>
    <option *ngFor="let level of referentiel.levels" [ngValue]="level">
      {{level.label }}
    </option>
</select>

:

compare(val1, val2) {
  return val1.id === val2.id;
}

,

<option [ngValue]="null">Select</option>

<option value="">Select</option>

Angular null. .