Как по умолчанию задать значение комбобокса и получить это значение в другом поле в angular?

Есть объект с данными:

 ELEMENT_DATA  = [{"shop":[{"Price":11,"seller":"John"},{"Price":22,"seller":"Rick"}], {"shop":[{"Price":33,"seller":"Andrew"}]]

Создаю поле с комбобоксом в material-table:

<ng-container matColumnDef="Availability">
    <th mat-header-cell *matHeaderCellDef>Availability</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field appearance="fill">
        <mat-label >Filter</mat-label>
        <mat-select   [(ngModel)]="element.shop.Price">
          <mat-option  *ngFor="let item of element.shop" [value]="item.Price">
            {{item.seller}} 
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </ng-container>

Как тут сделать чтобы по умолчанию при открытии страницы, в комбобоксе 1-ой записи был "John". а во второй "Andrew". На самом деле я знаю как "захардкодить" изначальные поля, если данных мало, но на деле данные получаю по апи, которых очень много. Если использовать [(ngModel)]="element.shop.Price" то комбобокс начинает тупить.

Затем в зависимости от выбранного продавца должно меняться значение другого столбца "price":

  <ng-container matColumnDef="price" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> price </th>
      <td mat-cell *matCellDef="let element">
        <span *ngFor="let item of element.shop" >
                      {{log(element.shop.Price)}}
        </span>
    </td>
  </ng-container>

Код выше не работает, я не знаю как туда передать "item.Price" первого контейнера.