PrimeNG 9：以反应形式显示在p-multiselect中选择的值

Question

我正在尝试使用their documentation以反应形式使用PrimeNG Multi-Select，这与反应形式毫无关系。

我想做的是像在他们的示例中一样，在表单控件下方显示选定的项目，除了他们的示例使用ngModel而不是反应性表单控件之外。

我按照他们的示例创建了其余代码，创建了一个变量

  divisionList: SelectItem[];

并按照示例所示将其填充到构造函数中。

然后我创建在formBuilder表单中定义的表单控件：

  fg = this.fb.group({
    ...
    divisions: ['']
  });

并且html是

<p-multiSelect
          [options]="divisionList"
          formControlName="divisions"
          defaultLabel="Select"
        ></p-multiSelect>

他们基于ngModel的简单方法是<p>Selected Cars: {{selectedCars1}}</p>

但是我没有使用ngModel。那么，如何显示模板中的选定项目？

更新：

我仍然希望有一种更简单的方法，但是到目前为止，我设法添加了一个更改处理程序：

       <p-multiSelect
          [options]="divisionList"
          formControlName="divisions"
          dropdownIcon="pi pi-caret-down"
          defaultLabel="Select"
          (onChange)="selectDivision($event)"
        ></p-multiSelect>

和功能：

selectDivision(e) {
  this.selectedDivisions = e.value.map((item) => item.name);
  if (this.selectedDivisions.length > 3) {
    this.selectedItemDisplay = `Selected items: ${this.selectedDivisions.join(', ')}`;
  } else {
    this.selectedItemDisplay = '';
  }
}