Bind Array Item to [(value)] in Angular

Hi i am working with Angular material and i have an Array of products that creates a table in my template

 <tbody>
    <tr *ngFor="let item of productArray | async; let i = index">

Inside this loop i have another loop on a <th> tag:

<th>
   <mat-form-field>
      <mat-select placeholder="Length" formControlName="lengthOption" [compareWith]="compareWith" [(value)]="item.lengthOption">
         <mat-option *ngFor="let lengthOption of item.lengthOptions" [value]="lengthOption">
              
         </mat-option>
      </mat-select>
   </mat-form-field>

I would like to make use of the two way binding of [(value)].

I know i can set [value] to be lengthOption.name for example and then set the binding to [(Value)]="selected" and then i can set this in my component (selected = whatever) or view it in the template via .

My query is can i get this value from the parent array like i am trying in the inner loop:

*ngFor="let item of productArray | async; let i = index"

[(value)]="item.lengthOption"

lengthOption does exist on productArray.

The point of this i want to set a initial selected value for each products mat-select.

lengthOption looks like { "id": 1, "name": "Ten Years" }

So i am trying to set the object to the mat-option from a parent array, not just a object value form its own array.

Thanks in advance.

from Bind Array Item to [(value)] in Angular