在 mat-dialog Angular 中传入输入

Question

所以我试图传递我在表单中输入的内容并将其传递给我的对话框按钮如何做到这一点我只得到

这就是我所做的。

openDialogSerialLot(index: number){
  let dialogRef = this.dialog.open(AddSerialLotComponent, {data:{Name:''}, {Address:''}})
  
  dialogRef.afterClosed().subscribe(result => {
    console.log(result)
  })
}


 constructor(@Inject(MAT_DIALOG_DATA) public data:any,private fb:FormBuilder) { }

  ngOnInit(): void {
    this.Form= this.fb.group({
      Name: [''],
      Address: [''],
    })
    this.Form.get('Name').setValue(this.data)
    this.Form.get('Address').setValue(this.data)
  }
}

Answer 1

根据您刚刚发布的内容，您将Name和Address作为空字符串发送，此外，我认为您的data结构不是您想要的

我相信您想要实现的目标如下：

@Component({...})
export class SomeComponent {
 openDialogSerialLot(index: number): void {
  const theData = { Name: 'some random name', Address: 'an address' };
  this.dialog
    .open(AddSerialLotComponent, theData)
    .afterClosed().subscribe(result => {
        console.log(result)
    });
  }
}

AddSerialLot 组件

@Component({...})
export class AddSerialLotComponent implements OnInit {

  constructor(
   @Inject(MAT_DIALOG_DATA) public data: { Name: string; Address: string },
   private dialogRef: MatDialogRef<AddSerialLotComponent> // you need to inject this for sending back the data you want
   private fb:FormBuilder
  ) { }

  ngOnInit(): void {
    this.Form= this.fb.group({
        Name: [''],
        Address: [''],
    });

    this.Form.get('Name').setValue(this.data.Name) //'some random name' value
    this.Form.get('Address').setValue(this.data.Address)// 'an address' value
  }
}

然后，在AddSerialLotComponent的某个地方，当您关闭对话框时，您应该发回您需要的内容并在.afterClosed function 中收听该响应

onSubmit(): void {
  this.dialogRef.close(this.Form.value); // { Name: '...', Address: '...' }
}

Answer 2

请在属性名称为quantity的 object 中传递数量。

父母

  openAlertDialog(index: number) {
    console.log(this.fg.value.Info);
    const dialogRef = this.dialog.open(AlertDialogComponent, {
      data: {
        quantity: this.fg.value.Info[index].qty,
      },
    });
    dialogRef.afterClosed().subscribe((result) => {
      const showButton = result.symbol;
      (this.fg.get('Info') as FormArray)
        .at(index)
        .get('showButton')
        ?.patchValue(showButton);
    });
  }

孩子

import { Component, OnInit, Inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-alert-dialog',
  templateUrl: './alert-dialog.component.html',
})
export class AlertDialogComponent implements OnInit {
  message: string = '';
  cancelButtonText = 'Cancel';
  displayedColumns = ['symbol'];
  dataValues;
  testGroup: FormGroup = new FormGroup({
    qty: new FormControl(['']),
  });

  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<AlertDialogComponent>
  ) {
    this.dataValues = data;
    this.dialogRef.updateSize('300vw', '300vw');
  }

  ngOnInit() {
    this.testGroup.patchValue({
      qty: this.dataValues.quantity,
    });
  }
}

儿童 html

<form [formGroup]="testGroup">
  <mat-form-field class="full-width">
    <mat-label>Qty</mat-label>
    <input matInput type="number" formControlName="qty" />
  </mat-form-field>
</form>

堆栈闪电战