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

Question

我有来自端点的数据，我正在材料表中显示，但我有另一个额外的列requestedStatus，其中有一个带2个选项的mat select。我需要能够使所选选项与行反应，这样在选择选项时，它应该使用所选选项的新键和值对来更新行。我可以显示表单，但我试图使其响应，但无法这样做。我需要先将数据发送到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>