Angular - 无法绑定属性，因为它不是“div”的已知属性

Posted 2023-02-23

【中文标题】Angular - 无法绑定属性，因为它不是“div”的已知属性

【英文标题】：Angular - Can't bind property since it isn't a known property of 'div'

【发布时间】：2019-11-04 11:38:52

【问题描述】：

我有一个对象列表，通过单击其中一个，我需要打开一个模式并显示该对象的一些属性。

我的代码如下所示：

对象组件：

export class VendorComponent implements OnInit 
  @Input() currentVendor: Vendor;
  vendors: Vendor[];

  constructor(public actRoute: ActivatedRoute,
              public router: Router,
              private vendorService: VendorService,
              private modalHandlerService: ModalHandlerService)  

  ngOnInit() 
    this.GetAll();
  

  GetAll() 
    this.vendorService.getVendors().subscribe((data: Vendor[]) => 
      this.vendors = data;
    );
  

  openVendorDetailsModal() 
    this.modalHandlerService.openVendorDetailsModal(this.currentVendor);
  

点击openVendorDetailsModal时，我需要打开一个带有详细信息的模式，我的视图如下所示：

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <div *ngFor="let vendor of vendors" [currentVendor]= "vendor" (click)="openVendorDetailsModal(vendor)">
      <tr>
    <td>vendor.Id</td>
    <td>vendor.Name</td>
  </tr>
  </div>
</table>

问题是视图上的[currentVendor]= "vendor" 语法正在返回标题中提到的错误。如何将当前供应商绑定到组件，以便我可以将其作为方法的参数发送？

【问题讨论】：

移除 [currentVendor] 并在组件处接收您的 openVendor... 中的供应商

我试过了，但是在组件上输入属性是未定义的，所以模态显示为空

【参考方案1】：

只需通过 openVendorDetailsModal 方法传递供应商

  <div *ngFor="let vendor of vendors" (click)="openVendorDetailsModal(vendor)">
      <tr>
    <td>vendor.Id</td>
    <td>vendor.Name</td>
  </tr>
  </div>

你可以使用供应商参数

  openVendorDetailsModal(vender) 
    this.modalHandlerService.openVendorDetailsModal(vender);
  

如果你想保存传递的 vernder 的引用，请在方法的主体中设置curentVender

  openVendorDetailsModal(v) 
    this.currentVendor = v;
    this.modalHandlerService.openVendorDetailsModal(v);
  

【参考方案2】：

我的意思是这样做：

openVendorDetailsModal(vendor) 
   this.modalHandlerService.openVendorDetailsModal(vendor);

在模板中删除 [currentVendor] 并继续将 vendo 传递给 openVendorDetailsModal。希望对您有所帮助。

【讨论】：

我让你检查了vendors中的内容？