angular - 如何在角度编辑时预填充或自动检测 mat-form-field 输入中的行数据？

Question

这是我的网格行

这是编辑对话框表单

我无法在编辑对话框中自动填充所选行的数据。这是我的网格 .ts 代码

`interface EcmToolChange {
   toolId: number;
   toolChangeId: number;
   partChangeId: number;
   partNumber: string;
   oppositePart: string;
   partType: string;
   releaseLevel: string;
   necLec: string;
   toolAffected: string;
   certDataAffected: number;
   tlLeadRelLvl: string;
   dtShippedToDatabank: string;
   necCompleteDate: string;
   sourceName: string;
   programName: string;
   pdi: string;
   lhStablePartCode: string;
   rhStablePartCode: string;
   authNumber: string;
   authNumberN: string;
   authTypeName: string;
   addedBy: number;
   fmtLastUpdatedDate: string;
   approvalDate: string;
   fmtdtShippedToDatabank: string;
   fmtCompleteDate: string;
   fmtNecCompleteDate: string;
   fmtReleaseLevel: string;
}


@Component({
   // tslint:disable-next-line: component-selector
   selector: 'ecm-tool-change',
   templateUrl: './ecm-tool-change.component.html',
   styleUrls: ['./ecm-tool-change.component.scss']
})
export class EcmToolChangeComponent implements OnInit, OnDestroy {

   pageOptions: PageOptions = {
      page: 0,
      order: 'asc',
      size: 10,
      sort: 'toolId',
   };

   private designSources: any[];
   data: EcmToolChange[];
   loading = false;
   total = 0;
   toolId: number;
   columns: ColumnDef[] = [
      { field: 'partNumber', name: 'Lead Part #', editable: false, width: '7em' },
      { field: 'oppositePart', name: 'Opp Part #', editable: false, width: '7em' },
      { field: 'fileType', name: 'File Type', editable: false, width: '6.5em' },
      { field: 'releaseLevel', name: 'Rel Lvl', editable: false, width: '5.5em' },
      { field: 'necLec', name: 'NEC LEC', width: '6.5em' },
      { field: 'toolAffected', name: 'TL Affected?', type: 'checkbox', width: '7.5em' },
      { field: 'certDataAffected', name: 'Cert Data?', type: 'checkbox', width: '7.5em' },
      { field: 'tlLeadRelLvl', name: 'TL Lead Rel Lvl', width: '9em' },
      { field: 'dtShippedToDatabank', name: 'Shipped to Databank', type: 'date', width: '13em' },
      { field: 'necCompleteDate', name: 'NEC Compl Date', type: 'date', width: '13em' },
      { field: 'sourceName', name: 'Design Source', width: '10em' },
      { field: 'authNumber', name: 'Auth. # (alpha)', width: '9.5em', editable: false },
      { field: 'authNumberN', name: 'Auth. # (numeric)', width: '10em', editable: false },
      { field: 'authTypeName', name: 'Auth. Type', width: '7em', editable: false },
      { field: 'programName', name: 'Program Name', width: '22em', editable: false },
      { field: 'pdi', name: 'PDI', width: '7em', editable: false },
      { field: 'lhStablePartCode', name: 'LH CSPC', width: '7em', editable: false },
      { field: 'rhStablePartCode', name: 'RH CSPC', width: '7em', editable: false },
   ];

   @Input() resourced = false;
   @Input() selectedEcmTool$: BehaviorSubject<any>;

   @ViewChild('toolChangeTable') toolChangeTable: DataTableComponent;

   constructor(
      private readonly ecmToolChangeService: EcmToolChangeService,
      private readonly ecmService: EcmService,
      private readonly dialog: MatDialog
   ) {}

  

   get hasSelectedNone(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length === 0;
   }

   get hasSelectedMultiple(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length >= 2;
   }
   get hasSelectedSingle(): boolean {
      return (this.toolChangeTable.selections || [])
         .filter((row) => Object.keys(row).length !== 0).length === 1;
   }

   ngOnInit() {
      if (this.resourced) {
         this.columns.forEach((val) => val.editable = false);
      }

      this.selectedEcmTool$.subscribe(
         (selectedEcmTool) => {
            if (selectedEcmTool) {
               const toolId = selectedEcmTool.toolId;
               this.updateSelectedEcmTool(toolId);
               this.updateDesignSources();
            } else {
               this.data = [];
            }
         }
      );
   }

   ngOnDestroy() {
      if (this.selectedEcmTool$) { this.selectedEcmTool$.unsubscribe(); }
   }

   onMultiRowUpdateClick() {
      this.dialog.open(EtcMultiRowUpdateComponent,
         {
            autoFocus: true,
            width: '450px',
            data: {
               selections: this.toolChangeTable.selections,
               designSources: this.designSources
            }
         }).afterClosed().subscribe((val) => {
            if (val && val.reload) { this.updateSelectedEcmTool(this.toolId); }
         });
   }`

这是我将函数传递给我的多重编辑的网格的 html

`<button mat-button (click)="onMultiRowUpdateClick()" (keypress.enter)="onMultiRowUpdateClick()"
     [disabled]="this.resourced || hasSelectedNone">Multi-Edit</button>`

这是编辑对话框的html：

<div mat-dialog-content>
   <form class="flex-dialog-container" [formGroup]="multiRowUpdateForm">
      <div class="space-between-items">
         <div></div>
         <div>
            <h4>Enable</h4>
         </div>
      </div>
      <div class="space-between-items">
         <mat-form-field>
            <mat-label>NEC LEC</mat-label>
            <input #neclec matInput formControlName="necLec"  autocomplete="off" 
               [minLength]="NEC_LEC_MIN_LENGTH" [maxLength]="NEC_LEC_MAX_LENGTH"
               [value]="neclec.value.toString().toUpperCase()">
         </mat-form-field>
         <mat-checkbox color="primary" formControlName="chkNecLec"></mat-checkbox>
      </div>

      <div class="space-between-items">
         <mat-checkbox color="primary" formControlName="toolAffected">Is Tool Affected</mat-checkbox>
         <mat-checkbox color="primary" formControlName="chkToolAffected"></mat-checkbox>
      </div>

      <div class="space-between-items">
         <mat-checkbox color="primary" formControlName="certDataAffected">Is Certification Data Affected</mat-checkbox>
         <mat-checkbox color="primary" formControlName="chkCertDataAffected"></mat-checkbox>
      </div>

      <div class="space-between-items">
         <mat-form-field>
            <mat-label>Tool Lead Release Level</mat-label>
            <input #tlr matInput formControlName="tlLeadRelLvl"  autocomplete="off"
               [value]="tlr.value.toString().toUpperCase()">
         </mat-form-field>
         <mat-checkbox color="primary" formControlName="chkTlLeadRelLvl"></mat-checkbox>
      </div>

这是我编辑对话框 ts 的代码

     constructor(
      private readonly dialogRef: MatDialogRef<EtcMultiRowUpdateComponent>,
      private readonly fb: FormBuilder,
      private readonly ecmToolChangeService: EcmToolChangeService,
      private readonly cgpAlertDialogService: CgpAlertDialogService,
      @Inject(MAT_DIALOG_DATA) private readonly data: any
   ) {
      this.multiRowUpdateForm = this.fb.group({
         chkNecLec: [false],
         chkToolAffected: [false],
         chkCertDataAffected: [false],
         chkTlLeadRelLvl: [false],
         chkDtShippedToDataBank: [false],
         chkDesignSourceId: [false],
         designSourceId: [],
         dtShippedToDatabank: [],
         necLec: ['', necLecValidator],
         tlLeadRelLvl: [''],
         certDataAffected: [false],
         toolAffected: [false]
      });
   }

   ngOnInit() {
      this.designSources = this.data.designSources;
   }

   ngOnDestroy() {
      this._subs.forEach(sub => sub.unsubscribe());
   }