Question

我有“材料对话框”，需要在其中通过单击“更改状态”按钮来更新表中的条目。

这是工作片段

https://stackblitz.com/edit/angular-alu8pa

现在，我已经能够从对话框获取数据。您可以从代码段中看到它的控制台。但是我需要使用此数据更新表中的条目。

原因和状态描述字段。

这是我的Dialog组件代码

  import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef, MatDialog} from "@angular/material";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import { Payment } from '../payments/payment';


@Component({
    selector: 'editing-dialog',
    templateUrl: './editing-dialog.component.html',
    styleUrls: ['./editing-dialog.component.scss']
})
export class EditingDialogComponent implements OnInit {
    form: FormGroup;
    reason:String;
    id: Number;
    statusdescription: String;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<EditingDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data:Payment) {
            this.reason = data.Reason;
            this.id  = data.Id;
            this.statusdescription = data.StatusDescription;
            this.form = fb.group({
                reason: [this.reason, Validators.required],
                id: this.id,
                status: status
            });
    }

    ngOnInit() {

    }
    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

通过save（）方法，我从对话框中获取数据。

我正在订阅付款部分

这是代码。

  import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator, MatDialog, MatDialogConfig, MatDialogRef} from '@angular/material';
import { PAYMENTS } from "./payments-mock";
import { EditingDialogComponent } from '../editingdialog/editing-dialog.component';
import { Payment } from './payment';



@Component({
  selector: 'app-payments',
  templateUrl: './payments.component.html',
  styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent implements AfterViewInit {

  constructor(private dialog: MatDialog) {}

    openDialog(Id, Currency, Amount,Reason,StatusDescription) {
      const dialogConfig = new MatDialogConfig();

      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;

      dialogConfig.data = {
          Id: Id,
          Reason: Reason,
          StatusDescription: StatusDescription
      };

      if
      (Currency.trim() === "UAH"){
        alert("You can’t approve such payment today. It is not a bank day for this currency.");

      }
      if(Currency.trim() == "EUR" && Amount > 4000)
      {
        alert("You have no authority to approve such payment. Please, ask your manager to do it");
      }


      const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
      dialogRef.afterClosed().subscribe(
        data => console.log("Dialog output:", data)
    );    
    }


  //Default values to checkboxes
  pending = false;
  approved = false;
  rejected = false;

  //List of displaying columns
  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason','Action'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
  }

  //Methods for checkboxes
  pendingModelChecked(value: any) {
    const filter = value ? 'Pending' : null
    this.dataSource.filter = filter;
  }

  approvedModelChecked(value: any) {
    const filter = value ? 'Approved' : null
    this.dataSource.filter = filter;
  }

  rejectedModelChecked(value: any) {
    const filter = value ? 'Rejected' : null
    this.dataSource.filter = filter;
  }
}

如何用新数据正确更新表中的行？

Answer 1

您可以执行以下操作来完成此操作。

将根元素payment作为参数传递给openDialog()，如果需要，您也可以将openDialog()减少为仅需要一个参数。

<button mat-button (click)="openDialog(payment.Id, payment.Currency, payment.Amount, payment.Reason,payment.StatusDescription, payment)">Change Status</button>

添加payment作为附加参数

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment) {

然后在您的afterClose()订阅中设置值

 dialogRef.afterClosed().subscribe(
      data => {
        console.log("Dialog output:", data)
        payment.Reason = data.reason;
        payment.StatusDescription = data.status
      }
    );

Stackblitz

https://stackblitz.com/edit/angular-wfvqbj?embed=1&file=src/app/payments/payments.component.html

例如，传递特定的参数payment.Id使其在函数中本地化，并将其与原始根记录分离，重新分配值不会影响调用者...传递整个根元素是一种方法围绕此问题，由于根元素现在在函数范围内，因此可以进行更改以使视图冒泡。

通过对话框角度材料更新表中的值

1 个答案: