Угловой 7: Как установить значение по умолчанию для Reactive Form mat-select, когда значением является объект с несколькими идентификаторами, а не с одним идентификатором?

Question

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

У меня есть мульти-выбор, который я хочу показать выбранным для загрузки, через запятую.

this.settingControls = new FormGroup({
  idsSelection: new FormControl(this.contentSettings.Ids)
});

    <mat-option *ngFor="let item of availIds" [value]="item.id">
      {{item | json}}
    </mat-option>

В списке для выбора есть несколько полей, в то время как информация, которую я храню и извлекаю, имеет только идентификаторы для уменьшения вызовов API.

Список, сохраненный как availIds, выглядит так:

const availIds = [
{id: 1, name : "somename", childId: 1, childName: "somechildname"},
{id: 1, name : "somename", childId: 2, childName: "somechildname"},
{id: 2, name : "somename", childId: 1, childName: "somechildname"},
{id: 2, name : "somename", childId: 2, childName: "somechildname"}

Итак, раньше я мог передать один массив чисел в new FormControl() (см. Код для машинописи выше) и иметь значение в html, равное [value]="item.id". При загрузке будет показано выбранное значение, а не текст заполнителя. Загруженные идентификаторы будут содержать что-то вроде следующего:

this.contentSettings.Ids = [1, 2, 3];

Все как положено.

Теперь я хочу сохранить {id: 1, childId: 1} или {'id': 1, 'childId': 1} (это будет просто json на БД) и загрузить это в FormControl следующим образом:

this.settingControls = new FormGroup({
  idsSelection: new FormControl(this.contentSettings.Ids)
});

<mat-form-field fxFlex>
  <mat-select multiple placeholder="Ids" formControlName="idsSelection">

  <!-- to check what value is actually being retrieved before it gets to typescript -->
  <!-- <mat-select-trigger *ngIf="idsSelection; let value">
      {{value | json}}
    </mat-select-trigger> -->

    <mat-option *ngFor="let item of availIds"
      [value]="{id: +item.id, childId: +item.childId}">
      {{item | json}}
    </mat-option>
  </mat-select>
</mat-form-field>

Загрузка в объекте {id: 1, childId: 1}, который является именно тем значением, которое содержится при выборе опции, не делает значение по умолчанию {id: 1, name : "somename", childId: 1, childName: "somechildname"}, которое мне нужно.

Может ли кто-нибудь пролить свет на то, как это будет сделано? Если он знает, что один числовой массив, который вводится, каким-то образом отображается на id, то как я могу получить его для сопоставления более сложного объекта? Это определенно не сделано по ссылке, потому что я ранее просто сохранил идентификаторы в число [].

Примечание. Чтобы все могли видеть, я добавил каналы json, чтобы показать, что я смотрю содержание того, что, по мнению html, спасло меня в предыдущих сеансах отладки, где я мог иметь пропущенный + или кавычки.

Answer 1

Мне пришлось изменить набор значений и сохранить его в примитивном типе, поэтому я изменил [значение] на

value="{{item.id}}_{{item.childId}}">

, а затем снова разделил его, когда мне нужно его сохранить.

Answer 2

Так вы устанавливаете значения по умолчанию.

<mat-form-field fxFlex>
  <mat-select multiple placeholder="Ids" formControlName="idsSelection" [value]="your default value">

    <mat-option *ngFor="let item of availIds"
      [value]="{id: +item.id, channel: +item.channel}">
      {{item | json}}
    </mat-option>

  </mat-select>
</mat-form-field>

Теперь какой-то случай

Если вы установите значение на, вы должны установить то же значение по умолчанию.

пример

<mat-option *ngFor="let item of availIds"
  [value]="item.value">
  {{item | json}}
</mat-option>

тогда в вашем вы должны использовать ту же структуру

<mat-select multiple placeholder="Ids" formControlName="idsSelection" [value]="availIds[0].value">

Вы также можете указать значение по умолчанию, например:

this.settingControls = new FormGroup({ 
  idsSelection: new FormControl(THE_DEFAULT_OPTION, []) 
});