Angular 9 Mat table 编辑 select 单元格并绑定数据

Question

我正在寻找一种使用垫子 table 编辑 table 的方法。我只需要编辑一个下拉列表单元格。我用这个 link 来修改我的 table 但我似乎无法解决我的问题。我对 angular 9 有点陌生，非常感谢您的帮助：

错误：属性 'map' 在类型 'MatTableDataSource' 上不存在。

这是我的 html 代码示例：

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

component.ts如下

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;
}

我也尝试使用 forEach() 函数，但出现同样的错误 -> 属性 'forEach' 在类型 'MatTableDataSource' 上不存在。那么我该如何解决这个问题。以及如何在此处正确绑定数据并保存。非常感谢帮助。

Answer 1

MatTableDataSource 不是数组。 MatTable 中使用的数据存储在 MatTableDataSource 的属性数据中。如果要遍历显示的数据，请尝试：this.dataSource.data.map()

Angular 9 Mat table 编辑 select 单元格并绑定数据

Angular 9 Mat table edit select cell and bind data

typescript

angular-material

angular

mat-table

angular9