Angular Mat 选择 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;
}

Mat 选择列表旨在按如下方式发出整个对象:

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 个是家具)，但是使代码和描述为空以进行测试.

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

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

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)

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