интегрировать раскрывающееся меню в каждый элемент списка в angular 7 и получать значение

Question

Здесь я хочу интегрировать раскрывающееся меню сбоку от списка с каждым элементом. Я попытался сделать то же самое, тогда, когда я выберу раскрывающееся меню, будет отображаться имя всего элемента списка

enter code here


this.productArrDummy=[
      {"id":1,"productName":"bag1"},
      {"id":2,"productName":"bag2"},
      {"id":3,"productName":"bag3"}
    ]
    this.dropdownArrDummy=[
      {"id":300,"deliveryBoy":"ABC"},
      {"id":400,"deliveryBoy":"MNO"},
      {"id":500,"deliveryBoy":"PQR"},
    ]
<div *ngFor="let item of productArrDummy;let i = index" style="display:flex;flex-direction: column;">
<p>{{item.productName}}</p>
<div>
  <mat-form-field >
    <mat-select placeholder="Select Delivery Boy" [(ngModel)]="promoMerCatType"  (selectionChange)="onCatChanged(promoMerCatType)">
      <mat-option  *ngFor="let boy of dropdownArrDummy; let j = index" [value]="boy"  >
          {{boy.deliveryBoy}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
</div>

введите изображение описание здесь