Установите начальное значение mat-select в другом формате, чем желаемое возвращаемое значение

Question

Здравствуйте, сообщество Stackoverflow,

Я пытаюсь инициализировать элемент управления формы с указанным значением c, но не могу найти способ выполнить мое требование. У меня есть следующий код:

HTML шаблон:

<mat-form-field>
  <mat-select formControlName='businessUnit'>
    <mat-option *ngFor="let businessUnit of businessUnitsArray" [value]="[businessUnit.id, businessUnit.costCenter]">{{businessUnit.businessUnitName}}</mat-option>
  </mat-select>
</mat-form-field>

TYPESCRIPT компонент:

this.updateDepartmentForm = this.formBuilder.group({
  departmentName:   [this.dialogData.departmentName, Validators.required ],
  departmentNumber: [this.dialogData.departmentNumber, Validators.required ],
  businessUnit:     [this.dialogData.businessUnitInfo[1], Validators.required ]
});

this.dialogData.businessUnitInfo[1] содержит строку, равную mat-option , которую я хотел бы выбрать изначально при инициализации формы. Я знаю, что для этого мне нужно изменить значение тега [value] mat-option на те данные, которые мне нужны, в данном случае this.dialogData.businessUnitInfo[1].

Однако моя проблема заключается в том, что при отправке формы требуемые данные, возвращаемые в отношении выбранного mat-option , не являются строкой выбранного параметра, а представляют собой массив, содержащий id выбранной опции и costCenter, которые представляют собой две переменные, связанные с выбранной mat-option , поэтому мне нужно сохранить тег [value] равным массиву -> [businessUnit.id, businessUnit.costCenter ].

Если код написан как есть, mat-select не инициализируется ни с каким значением. Есть ли способ, которым я могу достичь этого?

Спасибо всем за вашу поддержку

Answer 1

Вы пытаетесь использовать динамически созданный массив в качестве выбранного значения. Равенство массивов проверяется по ссылкам, поэтому независимо от того, какое значение вы задаете для элемента управления формы, оно не будет совпадать ни с одним из значений параметра. Что вы можете сделать:

1. Не использовать массив и просто использовать идентификатор в качестве выбранного значения
2. Использовать предварительно определенный массив массивов и установить выбранное значение среди массива

Как вариант 1. достаточно ясен, вот пример для 2. option:

this.businessSelections = this.businessUnitsArray.map(bu=> [bu.id, bu.costCenter]); // initialize a property with an array of arrays

В вашем шаблоне:

<mat-form-field>
  <mat-select formControlName='businessUnit'>
    <mat-option *ngFor="let businessUnit of businessUnitsArray;let ix = index"
                  [value]="businessSelections[ix]">
                 {{businessUnit.businessUnitName}} 
    </mat-option>
  </mat-select>
</mat-form-field>

Установите начальное значение:

this.updateDepartmentForm.patchValue({ businessUnit : this.businessSelections[0] })
// or query your array with the parameter you passed to your dialog
const buId = dialogData.businessUnitInfo[0]; // it contains id i think
const selected = this.businessSelections.find(r=> r[0] === buId); // find the selection with the id
this.updateDepartmentForm.patchValue({ businessUnit : selected });