角度垫选择CompareWith ID号，然后发射整个对象 [英] Angular Mat Select CompareWith ID number, and Emit Whole Object

问题描述

我有一个Mat Select下拉列表，其中包含对象列表中的以下值.

I have a Mat Select dropdown with the following values from an Object List.

export class Product {
    productId: number;
    productCode: string;
    productDescription: string;
}

垫选择列表"用于发出整个"对象，如下所示:

The Mat select List is meant to emit the Whole object as follows:

<mat-form-field>
    <mat-select formControlName="productData" [compareWith]="compareProductObjects"
    <mat-option>Select</mat-option>
    <mat-option *ngFor="let productItem of ProductList" [value]="productItem">
         {{productItem.productDescription}}
    </mat-option>
    <mat-select>
</mat-form-field>

还具有compareWith函数；有时，代码和描述可能会略有不同，具体取决于公司中不同的erp系统，但是ID始终相同，因此我们对此进行比较.

Also have compareWith function; sometimes code and description may slightly vary depending on different erp systems in company, however ID is always the same, so we compare upon that.

compareProductObjects(object1:any, object2:any) {
   if (typeof object2 === 'object') {
       return object1 && object2 && object1.productId === object2.productId;
}

ProductList具有所有真实列表数据. 修补表单时，我拥有产品类(其中2为Furniture)，但是将Code和Description设置为null进行测试.

The ProductList has all the real list data. When I patch the form, where I have product Class (with 2 being Furniture), however making Code and Description null to test.

为

productTest.productId = 2;
productTest.productCode = null;
productTest.productDescription = null;

 this.customer.form.patchValue({ productData: productTest});

运行此操作将修补表单，并成功更改下拉项！ 但是，从控制台形式选择的输出席子中的值仅显示为

Running this will patch the form, and Successfully change the dropdown item! However, the value in output mat select from console form only shows as

{productData: {productId = 2}} 

它不显示任何代码和描述；但是它成功地更改了垫选择项无代码和描述".

It does Not show any of Code and Description; however it successfully changed the mat select item, Without Code and Description.

如何做到这一点，当仅用ID修补表单时，它将改变并发出列表中的真实对象?

How do I make it so, when patching the form with only an ID, it will change and Emit the real object in the list?

注意:

此表单中还有30个其他项目.其他所有东西都完美地修补了文本框，复选框，试图防止为下拉菜单编写特殊的例外情况，并在可能的情况下希望为其他用户编写一种流利的方法

Have 30 other items in this form. Everything else patches perfectly, textboxes, checkboxes, trying to prevent writing special exception cases for dropdown, and want to write one fluent method for other users, if possible

this.customer.form.get('productData').setValue(this.ProductList.find(x=>x.id==2)

推荐答案

formGroup对对象一无所知.它只是在控件中传递它.仅在控件检查发送到控件的值是否与mat-select的列表选项中的项目之一匹配时.我认为，如果您不希望使用边缘功能，则只能在此处进行修改.

The formGroup does not know anything about the object. It is just passing it around in the controls. Only time the control is checking if the value send to the control matches one of items in the list options for mat-select. I think this is only place you can modify it, if you do not want to make an edge case functions.

compareProductObjects(object1:any, object2:any) {
  if (typeof object2 === 'object') {
    const isValue = object1 && object2 && object1.productId === object2.productId;
    if(isValue){
      Object.assign(object2, object1)
    }
    return isValue;
  }
  return false
}

我不认为这是个主意，但是如果对象没有很多属性，那么它应该不会那么糟.

I do not think this is idea, but if the object does not have a lot of properties, it should not be that bad.

我个人会使用:

this.customer.form.get('productData').patchValue(this.ProductList.find(x=>x.id==2)

这篇关于角度垫选择CompareWith ID号，然后发射整个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！