Angular Material对话框-将数据发送到对话框

Question

我正在尝试将相同的MAT对话框用于创建客户端和编辑客户端。我可以使创建方面顺利，但由于某些原因，我对应该很容易的事情失去了理智。在EDIT打开对话框方法中，我调用服务以通过ID获取客户端，然后将其添加到dialogConfig对象中，作为打开函数的第二个参数。如果我在调用open方法的组件中控制台该对话框Config的日志，我可以看到数据已附加到该对话框中，但是在对话框组件中，当拾取该数据时，我会得到NULL。为了我的一生，我可以将数据放入该组件中。

我用过

dialogConfig.data =客户端 - 和 - dialogConfig.data = {客户：客户}

都返回NULL

-----呼叫组件

editClientDialog(id: string) {
    // Create a dialog config object
    const dialogConfig = new MatDialogConfig();

    // Stop user from closing dialog by clicking elsewhere
    dialogConfig.disableClose = true;

    // Get client information from API
    this._clientService.getClient(id).subscribe((response) => {
      let client = response["client"];
      dialogConfig.data = client;
    });

    // Open dialog and also create reference to use for returned data
    let dialogRef = this.dialog.open(ClientDialogComponent, dialogConfig);

    // Returned data from dialog
    dialogRef.afterClosed().subscribe((result) => {
      if (result == undefined) {
        return;
      }
      console.log("AFTER CLOSED", result);
      // this._clientService.addClient(result).subscribe((response) => {
      //   console.log("Response", response);
      //   this.getClients();
      // });
    });
  }

-对话组件

import { Component, OnInit, Inject, AfterViewInit } from "@angular/core";
import { ClientService } from "../../../core/services/client.service";
import {
  FormBuilder,
  FormGroup,
  Validators,
  FormControl,
} from "@angular/forms";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { Client } from "src/app/core/models/client.interface";

@Component({
  templateUrl: "./client-dialog.component.html",
  styleUrls: ["./client-dialog.component.css"],
})
export class ClientDialogComponent implements OnInit {
  // Properties
  clientForm: FormGroup;
  submitted = false;
  client;

  constructor(
    public clientService: ClientService,
    private _fb: FormBuilder,
    private dialogRef: MatDialogRef<ClientDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log("IN CONSTRUCTOR", data);   <------- this value of data is NULL
  }

  ngOnInit() {
    this.buildClientForm();
    if (this.client !== undefined) {
      this.patchForm(this.client);
    }
  }

  buildClientForm() {
    this.clientForm = this._fb.group({
      individualAsBusiness: new FormControl(false),
      name: [null, [Validators.required]],
      email: [null, Validators.email],
      phone: [
        null,
        [
          Validators.minLength(10),
          Validators.maxLength(10),
          Validators.pattern("^[0-9]*$"),
        ],
      ],
      website: null,
      address: this._fb.group({
        street: null,
        city: null,
        state: null,
        zip: null,
      }),
    });
  }

  patchForm(client) {
    this.clientForm.patchValue(client);
  }

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

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

  // Form getters
  get name() {
    return this.clientForm.get("name");
  }

  get email() {
    return this.clientForm.get("email");
  }

  get phone() {
    return this.clientForm.get("phone");
  }

  get website() {
    return this.clientForm.get("website");
  }

  get address() {
    return this.clientForm.get("address");
  }
}

Answer 1

我认为问题在于，在检索客户端数据之前，对话框已打开。您应该在检索数据后打开对话框，类似这样，

this._clientService.getClient(id).subscribe((response) => {
    let client = response["client"];
    dialogConfig.data = client;

    // Open dialog and also create reference to use for returned data
    let dialogRef = this.dialog.open(ClientDialogComponent, dialogConfig);

    // Returned data from dialog
    dialogRef.afterClosed().subscribe((result) => {
        if (result == undefined) {
            return;
        }
        // ...
    });
});