Атрибут множественного выбора Bootstrap [selected] не работает с [(ngModel)]

Question

Ссылка на демо: https://stackblitz.com/edit/angular-gq35ac?file=src%2Fapp%2Fapp.component.html

<select 
  class="form-control"
  [(ngModel)]="selectedColumnModel"
  (change)="onColumnSelect(selectedColumnModel)" 
  style="height: 150px; width: 200px"
  multiple
>
  <option 
    *ngFor="let column of columns; let i = index;" 

    [ngValue]="column"
    [selected]="selectedColumns[i]?.title == column.title"
  >
    {{ column.title }}
  </option>
</select>

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

Если я удаляю [(ngModel)], он работает отлично, как я могу заставить его работать с [(ngModel)]

Некоторые люди предложили использовать [сравнить с]. Вот ссылка: https://angular.io/api/forms/SelectControlValueAccessor

Но я не уверен, как использовать это здесь. Пожалуйста, помогите.

Answer 1

назначить предварительно выбранные значения для selectedColumnModel

selectedColumnModel = ['UID','NAME','BRANCH' ];

демо