如何在Init上填充角度材料芯片阵列

Question

我正在尝试使用“带形状控制的角材料芯片”，因为我需要知道选择了哪些芯片。我目前不知道如何在初始化时用 string[] 填充 FormControl- 和 Set-Constructor 。这是我的代码/类：

export class EventPlanningComponent implements OnInit {

  allServices: ServiceDto[];

  keywords = new Set(); // new Set(['name1', 'name2', ...])
  formControl = new FormControl(); // new FormControl(['defaultName1', 'defaultName2', ...])

  constructor(
    private readonly serviceService: ServiceService
  ) { }

  async ngOnInit(): Promise<void> {
    await this.initServices();
  }

  async initServices(): Promise<void> {
    this.allServices = await this.serviceService.getAllServices().toPromise();

    for (const service of this.allServices) {
      this.keywords.push(service.name); // this can´t work
      if (service.default === true) {
        this.formControl.push(service.name); // this too
      }
    }
  }

  removeKeyword(keyword: string) {
    this.keywords.delete(keyword);
  }
}

谢谢

编辑：我想实现可以从一系列芯片中选择多个芯片，默认选择一些......

这是我的模板：

<mat-form-field class="chip-list" appearance="fill">
                <mat-label>Dienste auswählen</mat-label>
                <mat-chip-list #chipList aria-label="Dienste auswählen" multiple [formControl]="formControl">
                    <mat-chip *ngFor="let keyword of keywords" [selected]="false" [value]="keyword">
                        {{keyword}}
                    </mat-chip>
                </mat-chip-list>
            </mat-form-field>
<p>
        <b>The following keywords are selected:</b> {{formControl.value}}
    </p>

Answer 1

在研究了一些尝试和错误之后，我解决了这个问题：

HTML：

<mat-form-field class="chip-list" appearance="fill">
                <mat-label>Dienste auswählen</mat-label>
                <mat-chip-list #chipList selectable multiple>
                    <mat-chip *ngFor="let service of services" #chip="matChip" (click)="toggleSelection(chip, service)" [value]="service" [selected]="service.default">
                        {{service.name}}
                    </mat-chip>
                </mat-chip-list>
            </mat-form-field>

<div *ngIf="!!allSelectedServices">
        <b>The following Services are selected:</b>
        <div *ngFor="let selectedService of allSelectedServices">{{selectedService.name}}</div>
    </div>

TS：

  allServices: ServiceDto[] = [];
  allSelectedServices: ServiceDto[] = [];
  services: Set<ServiceDto>;

  constructor(
    private readonly serviceService: ServiceService
  ) { }

  async ngOnInit(): Promise<void> {
    await this.initServices();
  }

  async initServices(): Promise<void> {
    this.allServices = await this.serviceService.getAllServices().toPromise();
    this.services = new Set([...this.allServices]);

    for (const service of this.allServices) {
      if (!!service.default) {
        this.allSelectedServices.push(service);
      }
    }
  }

  toggleSelection(chip: MatChip, service: ServiceDto): void {
    chip.toggleSelected();

    if(!!this.allSelectedServices.includes(service)) {
      const index = this.allSelectedServices.indexOf(service);
      this.allSelectedServices.splice(index, 1);
    } else {
      this.allSelectedServices.push(service);
    }
  }

如下图所示：默认服务是预选和取消选择的，而其他服务是（取消）选择的......