Angular Default value dropdown using an Object - arrays

Question

I am using Angular Material (latest stable version) for my project and I am not able to set the default value in the dropdown by using an Object. My code:
TS-FILE:
selectedObject: any;
selectedObjectList: any = [{ key: 1, value: 'One' }, { key: 2, value: 'Two' }, { key: 3, value: 'Three' }];
changeMatObject(value: any) {
console.log('MatObject value: ', value);
}
ngOnInit(): void {
this.selectedObject = { key: 1, value: 'One'};
}
HTML-FILE:
<mat-form-field>
<mat-select [(value)]="selectedObject">
<mat-option *ngFor="let selectedObject of selectedObjectList; let i = index" value="{{selectedObject.key}}"
(click)="changeMatObject(selectedObject.value)">
{{selectedObject.value}}
</mat-option>
</mat-select>
</mat-form-field>
Apparently it is possible to set the default value when the value in the HTML [(value)] is set to a string like this example:
TS-FILE:
selectedString: any;
selectedStringList: any = ['One', 'Two', 'Three'];
changeMatString(value: any) {
console.log('MatString value: ', value);
}
ngOnInit(): void {
this.selectedObject = 'One';
}
HTML-FILE:
<mat-form-field>
<mat-select [(value)]="selectedString">
<mat-option *ngFor="let selectedString of selectedStringList; let i = index" value="{{selectedString}}"
(click)="changeMatString(selectedString)">
{{selectedString}}
</mat-option>
</mat-select>
</mat-form-field>
This is a small piece of code but with larger lists/objects it can be difficult. Can someone explain what the difference is creating a dropdownlist with array filled with strings and an array filled with objects and why it isnt possible to set the default value in object dropdown?

Answer 1

Did you try to use [(ngModel)] in place of [(value)] ?
<mat-form-field>
<mat-select [(ngModel)]="selectedString">
<mat-option *ngFor="let string of selectedStringList; let i = index" value="{{string}}"
(click)="changeMatString(string)">
{{string}}
</mat-option>
</mat-select>
</mat-form-field>

Answer 2

You made a few typos (and re-used selectedObject in your template) and you need a way to compare objects:
HTML
<mat-form-field>
<mat-select [(value)]="selectedObject" [compareWith]="compareObjects">
<mat-option *ngFor="let selectableObject of selectedObjectList; let i = index" [value]="selectableObject"
(click)="changeMatObject(selectableObject.value)">
{{selectableObject.value}}
</mat-option>
</mat-select>
</mat-form-field>
(Note the difference between selectedObject and selectableObject, the [value] binding and the compareObjects function)
TypeScript
public compareObjects = function (option, value): boolean {
return option.key === value.key;
}