angular 将数字数组绑定到纯 bootstrap 多选值（反应形式）

Question

在 angular html 模板中，我有 multiselect（普通 bootstrap multiselect），就像在 html 中一样：

<form [formGroup]="globalScriptForm">
...
  <div class="form-group">
    <label for="events">Events</label>
    <select multiple class="form-select"
            type="text"
            id="events"
            formControlName="events">
       <option value=0>a</option>
       <option value=1>b</option>
       <option value=2>c</option>
     </select>
  </div>
...
</form>

这是来自控制器的代码：

export class GlobalScriptEditComponent implements OnInit {
  globalScriptForm!: FormGroup;
  ngOnInit(): void {
    let events: number[] = [0,1];
    this.globalScriptForm = new FormGroup({
      'events': new FormControl(events),
    });
  }
}

问题是如何根据事件数组中的值在 html 模板 selected 中制作多个 select 选项控制器，例如[0,1]?

即在 html 中得到这个结果（注意选项 0 和 1 旁边的单词 selected，因为这些是数组中的值）

  <div class="form-group">
    <label for="events">Events</label>
    <select multiple class="form-select"
            type="text"
            id="events"
            formControlName="events">
      <option value=0 selected>a</option>
      <option value=1 selected>b</option>
      <option value=2>c</option>
    </select>
  </div>

希望现在更清楚了。谢谢！

Answer 1

应将选项列表添加到 ts 文件中：

optionsList = ['a', 'b', 'c'];

它应该像这样在 html 文件中使用：

<form [formGroup]="globalScriptForm">
...
  <div class="form-group">
    <label for="events">Events</label>
    <select multiple class="form-select"
            type="text"
            id="events"
            formControlName="events">
       <option *ngFor="let option of optionsList; let i = index" [value]="i">{{option}}</option>
     </select>
  </div>
...
</form>

而不是对其进行硬编码（如上所示）。

其他一切都不应该改变。毕竟是简单的解决方案

angular 将数字数组绑定到纯 bootstrap 多选值（反应形式）

angular binding numbers array to plain bootstrap multiselect value (reactive forms)

angular

multi-select