Appending Dynamic variable value to ng model of mat select is not work

Question

<mat-select placeholder="Select Crop Type" [(ngModel)]="cropname" class="select" formControlName="croptype">

<mat-option *ngFor = "let i of Croptype" [value] = "i">{i.CropName}</mat-option> </mat-select>

 

In component.ts

 

Croptype = [ { CropID: '1', CropName: 'sweetlime', ScientificName: 'CitrusImetta' }, ];

 

this.cropname="sweetlime" when iam updating ng model value with below line the above issue occurs

The Example for the issue :https://stackblitz.com/edit/angular-be1gqv?file=src%2Fapp%2Fapp.component.html

In the above issue if [value]=i.Crop Name and Crop name value inside array and ng model value are same, then it is showing on dropdown ,but if [value]="i", it is not working. But based on our requirement we need to have complete object value in [Value].so please suggest how to resolve this issue