How to bind dropdown value dynamically in Angular 7 - angular7

Question

I have a dropdown, the values of this dropdown should be bind dynamically.
<mat-select formControlName="approver">
<mat-option *ngFor="let action of approver; let i = index" [value]="approver[i].value">
{{approver[i].viewValue}}
</mat-option>
</mat-select>
I have a grid and selected rows column values should be the value of dropdown.
getApprover() {
console.log('123');
this.selectedRowData = this.data.Dialog_rowData;
for (let i = 0; i < this.selectedRowData.length; i++) {
this.approver[i] = [
{ value: this.selectedRowData[i].approverList.login0,
viewValue: this.selectedRowData[i].approverList.name0 }
];
}
console.log(this.approver);
return this.approver;
}
export interface ExApprover {
value: string;
viewValue: string;
}
approver: ExApprover[] = [
{value: 'Brasile, Theresa', viewValue: 'Brasile, Theresa'}, ];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
approver: [ { value: '', viewValue: ''}]
});
of(this.getApprover()).subscribe(approver => {
this.approver = approver;
});
}
ngOnInit() {
}
I am getting error like 'Cannot find control with name: 'user Input' and values are not loaded.