Angular 4 select the whole object

Question

I have the following:

<select [(ngModel)]="selectedMetric">
        <option *ngFor="let metric of suggestedMetrics" [value]="metric">{{metric.displayName}}</option>
</select>

Where suggestedMetricsis an array of objects (typescript class).

When I select an item from the list, the model is updated with a string "[object Object]"instead of the object itself.

Does it support only strings? Can I install it on the whole object? This will save me from looking for it again in the original array ...

Answer 1

You should use instead ngValue value

  <option *ngFor="let metric of suggestedMetrics" [ngValue]="metric">{{metric.displayName}}</option>