Обновить значение в таблице из Dialog Angular MAterial

Question

У меня есть диалог материалов, где мне нужно обновить запись в таблице, нажав кнопку Изменить статус.

Здесь работает фрагмент

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

Теперь я смог получить данные из диалога.Вы можете увидеть это консоль из фрагмента.Но мне нужно обновить запись из таблицы с этими данными.

Поля Reason и StatusDescription.

Вот мой код компонента 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, сделать их локальными для функции и отделить их от исходной корневой записи, переназначив значенияне влияют на вызывающего ... передача всего корневого элемента - это способ обойти это и позволит внесенным изменениям перейти к представлению, поскольку корневой элемент теперь находится в области действия функции.