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

【问题标题】：Angular - Can't bind property since it isn't a known property of 'div'Angular - 无法绑定属性，因为它不是“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... 中的供应商
我试过了，但是在组件上输入属性是未定义的，所以模态显示为空

标签： angular data-binding components

【解决方案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中的内容？