带反应垫选择的角度材料表

Question

我有来自端点的数据，我在材料表中显示了这些数据，但是我还有另一个额外的列

requestedStatus

，其中有一个带有 2 个选项的垫选择。我需要能够使选定的选项与行反应，这样在选择该选项时，它应该使用选定选项的新键和值对更新该行。我能够显示表单，但我试图使其具有反应性，但无法这样做。我需要先将数据发送到formArray然后将其分配给数据源还是有其他方法吗？

HTML 代码

<div *ngIf="loading">
    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>

<div fxLayout="column" [hidden]="waiting">
    <form [formGroup]="form">
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%;" formArrayName="tableRowArray">
            <ng-container matColumnDef="srNo">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Sr No </th>
                <td mat-cell *matCellDef="let row;let i = index"> {{ i + 1 }}
                </td>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="parcelId" formArrayName="parcelId">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> CN </th>
                <td mat-cell *matCellDef="let row;let i = index" [formControlName]="id"> {{row.id}} </td>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="amount" formArrayName="amount">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Amount </th>
                <td mat-cell *matCellDef="let row;let i = index" [formControlName]="amount"> {{row.amount}} </td>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="orderId" formArrayName="orderId">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Vendor Order ID </th>
                <td mat-cell *matCellDef="let row;let i = index" [formControlName]="orderId"> {{row.vendorParcelId}} </td>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="currentStatus" formArrayName="currentStatus">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Current Status</th>
                <td mat-cell *matCellDef="let row;let i = index" [formControlName]="status"> {{row.currentStatusId}}
                </td>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <ng-container matColumnDef="requestedStatus" formArrayName="requestedStatus">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Requested Status</th>
                <td mat-cell *matCellDef="let row;let i = index">
                    <mat-label>Select Status</mat-label>
                    <mat-select formControlName="requestedStatus">
                        <mat-option [value]="active" *ngFor="let active of requestedStatus">
                        {{ active.name}}
                        </mat-option>
                    </mat-select>
                <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns; let i=index; ">
        </table>
    </form>
</div>

<div style="float: right;">
    <button class="w-100-p" mat-flat-button color="primary" (click)="sendVendorIds()">
        Change Status
    </button>
</div>

打字稿代码

dataSource: any[];
  @Input() dataSource$: Observable<any[]>;
  loading: boolean;
  waiting: boolean;
  displayedColumns: string[];
  form: FormGroup;
  requestedStatus = [
    {
      id: "rtv",
      name: "Return to Vendor",
    },
    {
      id: "rfr",
      name: "Request for Reattempt"
    }
  ];

  constructor(private fb: FormBuilder) {
    this.displayedColumns = [
      "srNo",
      "parcelId",
      "amount",
      "orderId",
      "currentStatus",
      "requestedStatus"
    ];
  }

  createFormArray(): FormArray {
    return new FormArray(this.dataSource.map(item => new FormGroup({
      requestedStatus: new FormControl(item.active)
    }))); 
  }

  createTableRow(data) {
    this.fb.group({
      id: new FormControl(data.id),
      amount: new FormControl(data.amount),
      orderId: new FormControl(data.vendorParcelId),
      status: new FormControl(data.currentStatus),
      requestedStatus: new FormControl(null)
    });
  }

  ngOnInit() {
  }

  ngOnChanges() {
    this.loading = true;
    this.waiting = false;
    this.dataSource$.subscribe((res) => {
      this.dataSource = res;
      this.loading = false;
      this.waiting = true;
    });
  }

  someMethod(value) {
    console.log(this.form.value);
  }

Answer 1

你好:)可能不是时候....

我实现了这个，我希望它有帮助......：

<ng-container matColumnDef="nature">
  <th mat-header-cell *matHeaderCellDef [id]="'nature'"></th>
  <td mat-cell *matCellDef="let document">
    <mat-select>
      <mat-option (onSelectionChange)="onChangeNature(document,null)">
        Sélectionnez une nature...
      </mat-option>
      <mat-option *ngFor="let nature of (natures$ |async)" [value]="nature"
                  (onSelectionChange)="onChangeNature(document,$event.source.value)">
        {{ nature.libNature }}
      </mat-option>
    </mat-select>
  </td>
</ng-container>

Answer 2

如果解决了请分享解决方案