Angular 版本：14.2.9 - “表单数据绑定问题：数据未正确绑定/填充 - 需要帮助”

Question

我目前正在使用 Angular 版本 14.2.9，在将数据绑定到表单时遇到问题。我想实现一个功能，在单击“更新”图标时，会打开一个模式，并预先填充数据。用户进行更新后，表单的数据应自动清除。虽然我能够在控制台中成功记录数据，但它似乎没有正确绑定到表单中的相应文本字段。我已确认数据按预期到达控制台。我已经彻底检查了我的代码和表单设置，但我无法确定为什么数据没有按应有的方式显示在表单字段中。

我尝试在 console.log 上显示数据

console.log("Event Type:", eventData.eventType);
console.log("Selected Data:", eventData.data); 

list-staff.component.ts：-

 handleIconClickEvent(eventData: { eventType: string, data: any }) {
    console.log("Event Type:", eventData.eventType);
    console.log("Selected Data:", eventData.data); 
    if(eventData.eventType == 'DELETE'){
      this.staffService.deleteData(eventData.data.id);
    }
    if(eventData.eventType == 'EDIT'){
      this.staffUserData = eventData.data;
    
    }
    if(eventData.eventType == 'VIEW'){
      const modalRef=this.modalService.open(ViewPopupComponent, {
        size: 'lg',
        backdrop: 'static',
      });
      modalRef.componentInstance.data = this.data;
      this.modalClosed.emit();
    }
  }

但是这里的数据没有在编辑和查看图标中填充/绑定..

clearData(){
    this.staffUserData = null;
  }

list-staff.component.html：-

  <app-create-staff-button  [userData]="staffUserData" (modalClosed)="clearData()"></app-create-staff-button> 

staff-form.component.ts：-

 
  ngOnInit(): void {
   if (this.userData) {
      this.createStaffForm.patchValue({
        firstName: this.userData.firstName || '', 
        lastName: this.userData.lastName || '',   
        userName: this.userData.userName || '',
  });
    }
  }

我非常感谢有关如何在我的 Angular 应用程序中排查和解决此数据绑定问题的任何指导。

我尝试用这个来填充数据..

if (this.userData) {       
this.createStaffForm.patchValue({ firstName: this.userData.firstName || '',          
lastName: this.userData.lastName || '',   
userName: this.userData.userName || '',   
});     
}

如果我添加任何默认值，它会显示固定值，但数据不会填充/绑定。

我期望发生的事情： 我预计我在控制台中记录的数据将填充表单中相应的文本字段。这意味着当我在控制台中记录数据时，它也应该显示在表单字段中。

实际结果： 但是，尽管在控制台中验证了数据，但数据并未按预期填充表单字段。表单字段仍为空，数据绑定无法正常工作。

Answer 1

我尝试回答这个问题，尽管你的代码不完整，你甚至没有提到你正在使用哪个组件库（ng-zorro，Angular Material，...？）。假设您使用的是 Angular Material：您尚未正确插入数据。当您调用 modalService.open 时，必须将数据作为选项对象的一部分传递。这可以在 Angular Material 文档中找到： [https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component]

所以，在你的情况下，这应该有效：

const modalRef=this.modalService.open(ViewPopupComponent, {
  size: 'lg',
  backdrop: 'static',
  data: this.data
});

在弹出组件内部，您可以像这样注入数据：

constructor(@Inject(MAT_DIALOG_DATA) public data: unknown) { }

（用适合您的类型定义替换类型“未知”）

备注：

• 下次，请发布与回答您的问题相关的所有代码。
• 请同时提及除框架之外您使用的所有内容。

只是一些一般性提示：

• 不要使用“任何”。通过使用“any”，您将失去 TypeScript 的优势。通过使用“any”，您基本上表示您不关心类型保存。
• 你应该使用 === 而不是 ==