CODEWITHSUNDEEP
angulartypescriptangular-materialangular9mat-table
Ashane Alvis
Ashane Alvis

Reputation: 810

Angular 9 Mat table edit select cell and bind data

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.

Upvotes: 0

Views: 1044

Answers (1)

Alex
Alex

Reputation: 1158

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()

Upvotes: 1

Related Questions