How to bind dropdown value dynamically in Angular 7

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.