Question

我正在Angular Material中显示员工记录的列表（Employee-ListComponent），其中包含两个操作按钮（编辑和删除）以及一个“创建”按钮，该按钮允许我创建一个新条目（EmployeeComponent）。单击“编辑”时，将弹出一个表单，我想用行中的相应员工数据填充在“创建”中呈现的同一表单。我在service.ts中有一个函数，该函数在employee-list.ts onEdit（）中被调用，据我在控制台中看到的那样，该函数成功地用正确的数据填充了表单：

  populateForm(employee) {
    this.form.setValue(employee);
    console.log(this.form.controls['$key'].value);
  }

但是，打电话时

 this.dialog.open(EmployeeComponent,dialogConfig);

我弹出的窗口仍然呈现一个空表格。我缺少什么让EmployeeComponent实现表格中的更改？

我的初始形式也在服务文件中定义。我是Angular /反应式表单的新手，但我想知道为什么employee.component.ts文件没有订阅以侦听service.form中的任何更改

查看相关部分：

Employee-List.comnponent.ts

ngOnInit() {
    this.service.get_employees().subscribe(
      res => {
        var list = res;
        //console.log(list);
        let array = list.map(item => {
          return {
            $key: item.employeeid,
            ...item
          }
        });
        this.listData = new MatTableDataSource(array);
        console.log(this.listData)
    });
  }

  onEdit(row){
    console.log(row)
    this.service.populateForm(row);
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(EmployeeComponent,dialogConfig);
  }

Employee.comnponent.ts


export class EmployeeComponent implements OnInit {

  constructor(
    private service: EmployeeService,
    private notificationService: NotificationService,
    public dialogRef: MatDialogRef<EmployeeComponent>) { }

  ngOnInit() {
    this.service.get_employees().subscribe();
  }

employee.component.html

<form [formGroup]="service.form" class="normal-form" (ngSubmit)="onSubmit()">
    <mat-grid-list cols="2" rowHeight="700px">
            <mat-grid-tile>
                <div class="controles-container">
                    <input type="hidden" formControlName="$key">

employee-list.component.html

<ng-container matColumnDef="actions">
                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
                        <mat-cell *matCellDef="let row">
                            <button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
                            <button mat-icon-button color="warn" (click)="onDelete(row.$key)"><mat-icon>delete_outline</mat-icon></button>                        </mat-cell>
</ng-container>

employee.service.ts

  form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    city: new FormControl(''),
    gender: new FormControl('1'),
    department: new FormControl(0),
    hireDate: new FormControl(''),
    isPermanent: new FormControl(false)
  });

 // First a function to retrieve all the records
  get_employees(): Observable<any>{
    return this.http.get(this.baseUrl + "/api/employees/", this.httpOptions);
  }

  populateForm(employee) {
    this.form.setValue(employee);
    console.log(this.form.controls['$key'].value);
  }

populateForm（）中的日志显示它具有正确的键值，但是弹出窗口中的表单正呈现为$ key = null

意识到这有点类似于：

谢谢！

=========更新=======

我添加了

private dialogRef: MatDialogRef<QuestionComponent>,
@Inject(MAT_DIALOG_DATA) public data: any

到employee.component.ts中的构造函数，并在记录注入ngOnInit（）{}中的对象后，我可以看到它获取了填充表单所需的正确数据。但是弹出表单仍然没有被填充。有人可以让我摆脱黑暗吗？

Angular 8-调用form.setValue（）时未填充反应形式

0 个答案: