首先

当我想要使用Angular创建一个可以在selectbox中进行多选的漂亮表单时，我发现非常麻烦，因此我会记下一些步骤和说明备忘。

我们的策略是避免麻烦地自行实现，而是将这些任务交给能够完成的插件来处理。

得出结论

经过总结，我们发现通过使用Angular Material库可以实现这一目标。

以下是实施步骤。
※由于使用Angular CLI，请安装Angular CLI。如果没有安装，请参考以下文章进行安装。
https://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b

操作步骤

1. 引入Angular Material

请在控制台中执行以下命令：
ng add @angular/material
然后在控制台中会出现以下提示：
选择一个预设主题名称，或者输入”custom”来自定义主题：
请选择您喜欢的主题。
下面的选项均可连续按下y进行选择：
设置HammerJS用于手势识别？是
为Angular Material设置浏览器动画？是

以上是Angular Material的引入完成。

2. 实现样例应用

我們將使用Angular CLI來創建並使用一個樣本應用程式。

以下是從示例應用程式中進行更改的程式碼。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSelectModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Select with multiple selection */
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

<div class="wrapper">
  <mat-form-field>
    <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>
<router-outlet></router-outlet>

.wrapper {
  width: 400px;
  height: auto;
  margin: 0 auto;
  margin-top: 200px;
}
.mat-form-field {
  width: 400px;
}

3. 执行示例应用程序

完成编辑样品应用后，让我们启动应用。
在控制台上执行以下命令。
ng serve

当应用程序启动后，请通过浏览器进行访问。
可以按以下方式操作选择框。

请参考

这是一个关于公式的文档。
https://material.angular.io/components/select/overview

最后

在Jquery的插件非常容易找到的情况下，Angular的插件却不容易找到。
花了一些时间才找到，希望这篇文章能帮到其他人。