如何将对象作为参数传递给 ngModelChange angular 2

Question

注意：我刚从 angular.. 好的，这就是我的：

<select class="form-control custom-select"
      [(ngModel)]=package
      (ngModelChange)="bindPackageCount(package)"
      formControlName="packagingProfile">
       <option *ngFor="let package of createdPackageData"
               [value]="package.count">
               {{package.package.name}} - {{package.type.name}}
       </option>
 </select>

通过提供 package.count 作为 select 标记的 [value]，我可以绑定到它并将它作为参数传递给 bindPackageCount。我想做的是将完整的包（对象）作为参数传递，而不仅仅是 package.count（数字）。然而，当我这样做时

bindPackageCount(package) {
    // package resolves to [Object object]
}

根据其他人的问题.. 是的，这是一种反应形式，这是它的创造：

createPackagingForm() {
    this.packagingForm = this._fb.group({
        packagingProfile: ['', Validators.required]
    });
}

有什么想法吗？谢谢

Answer 1

您可以像这样使用选项的点击事件并获取包值

<select class="form-control custom-select"
      [(ngModel)]=package
      formControlName="packagingProfile">
       <option *ngFor="let package of createdPackageData"
               [value]="package.count" (click)="bindPackageCount(package)">
               {{package.package.name}} - {{package.type.name}}
       </option>
 </select>

Answer 2

由于您使用的是反应形式，因此无需使用 ngModel 或 ngModelChange。 formControlName 将捕获更改。据我了解，您想将整个 package 对象绑定到您的表单，这可以通过使用 [ngValue] 来实现，这与 [value] 绑定整个对象相反。所以你的 select 看起来像这样：

<select formControlName="packagingProfile">
   <option *ngFor="let package of createdPackageData" [ngValue]="package">
           {{package.name}} - {{package.type}}
   </option>
</select>

这样，您就可以将整个对象存储在表单控件中 packagingProfile

DEMO

注意，损坏link

如何将对象作为参数传递给 ngModelChange angular 2

How to pass object as a param on ngModelChange angular 2

angular2-ngmodel

angular

DEMO