Angular Мат Выберите Сравнение с идентификатором и Emit Whole Object - PullRequest
Новая
       37

Angular Мат Выберите Сравнение с идентификатором и Emit Whole Object

5 голосов
/ 21 марта 2020

У меня есть раскрывающийся список «Выбор матов» со следующими значениями из списка объектов. 

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

Список выбора матов предназначен для излучения всего объекта следующим образом: 

<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 всегда одинаков, поэтому мы сравним это. 

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

В ProductList есть все реальные данные списка. Когда я исправляю форму, где у меня есть Класс продукта (где 2 - Мебель), я делаю Код и Описание пустыми для тестирования.

as 

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

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

Запустив это, вы исправите форму и успешно измените выпадающий элемент! Однако значение в поле выбора вывода из формы консоли отображается только как 

{productData: {productId = 2}}

Не отображается ни Код, ни Описание; однако он успешно изменил элемент выбора мата без кода и описания.

Как мне сделать так, чтобы при исправлении формы только с идентификатором он изменял и выдавал реальный объект в списке?

Примечание:

Есть 30 других предметов в этой форме. Все остальное исправляется, текстовые поля, флажки, пытаясь предотвратить написание особых исключений для выпадающего списка, и хотят написать один свободный метод для других пользователей, если это возможно 

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

1 Ответ

0 голосов
/ 30 марта 2020

FormGroup ничего не знает об объекте. Это просто передать его в элементах управления. Только раз, когда элемент управления проверяет, соответствует ли значение, отправленное элементу управления, одному из элементов в параметрах списка для mat-select. Я думаю, что это единственное место, где вы можете изменить его, если вы не хотите делать крайний случай. 

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
}

Не думаю, что это идея, но если объект не обладает множеством свойств, он не должен быть таким плохим.

Лично я бы использовал: 

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