Angular 9 Mat table edit select cell and bind data

Question

I'm figuring out a way to edit a table using mat table. I needed to only edit one cell which is a dropdown. I use this link to modify my table but I seem to can't resolve my issue. I'm a bit new to angular 9 and help is much appreciated:

The error: Property 'map' does not exist on type 'MatTableDataSource'.

Here's my html code sample:

<ng-container matColumnDef="bidderstatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
        <!--<td mat-cell *matCellDef="let element"> {{element.bidderStatus}} </td>-->
        <td mat-cell *matCellDef="let element;">
          <mat-select formControlName="BidderStatus">
            <mat-option [value]="bid.value" *ngFor="let bid of bidderStatus">
              {{ bid.value }}
            </mat-option>
          </mat-select>
        </td>
      </ng-container>

The component.ts as follows

export class BiddersComponent implements OnInit {

  displayedColumns: string[] = ['bidderId', 'title', 'firstName', 'surname', 'email','bidderstatus', 'action'];
  bidders: IBidder[];
  dataSource: MatTableDataSource<IBidder>;
  loading: boolean;
  bidder: FormGroup;
  bidderStatus: BidderStatus[] = [
    { value: "Registered/ not confirmed", description: "Registered/ not confirmed" },
    { value: "Confirmed / can't bid", description: "Confirmed / can't bid" },
    { value: "Can bid", description: "Can bid" },
    { value: "Deactivated / can access but can't bid", description: "Deactivated / can access but can't bid" },
    { value: "Suspended / can't even see", description: "Suspended / can't even see" }
  ]

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  constructor(private bidderService: UserService, private router: Router, private fb: FormBuilder) { }

  ngOnInit() {

    this.LoadBidders();
    this.bidder = this.fb.group({
      BidderStatus:['']
    });
    this.createFormArray();
  }
  LoadBidders() {
    this.LoaderShow();
    this.bidderService.GetBidders(1).subscribe(result => {
      this.bidders = result;
      this.dataSource = new MatTableDataSource(this.bidders);      
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.LoaderHide();
    }, error => { console.error(error); this.LoaderHide(); });
  }

  createFormArray(): FormArray {
    return new FormArray(this.dataSource.map(item => new FormGroup({
      BidderStatus: new FormControl(item.BidderStatus) //This is where the error shows on map
    })));
  }
}

interface BidderStatus {
  value: string;
  description: string;
}

I also tried with forEach() function but same error occurs -> Property 'forEach' does not exist on type 'MatTableDataSource'. So how do I resolve this. And how do I properly bind data here and save. Help is really appreciated.

Answer 1

MatTableDataSource is not an array. The data used in your MatTable is stored in the property data of the MatTableDataSource. If you want to iterate over the displayed data, try: this.dataSource.data.map()