Question

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

我的代码如下：

对象组件：

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"语法返回标题上提到的错误。如何将当前供应商绑定到组件，以便可以将其作为方法上的参数发送？

Answer 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);
  }

如果您想保存传递的书呆子的引用，请在方法的正文中设置curentVender

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

Answer 2

我的意思是这样做：

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

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

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

2 个答案: