具有模板驱动形式、动态选项的 primeNG p-multiSelect

Question

我的表单中有两个下拉菜单。当我在第一个下拉列表中单击一个选项时，我会调用 API 以获取第二个下拉列表的选项，即 p-multiselect。我的问题是多选选项没有更新（没有显示选项）

<div class="col-sm-4 mb-3">
      <label for="levelId">Livello Codici Promozionali</label>
      <select
        class="form-control"
        name="levelId"
        [(ngModel)]="campagna.levelId"
        (change)="getCodiciPromozionali()"
      >
        <option></option>
        <option
          *ngFor="let type of promoCodeTypes"
          [ngValue]="type.id"
          [textContent]="type.description"
        ></option>
      </select>
    </div>
    <div class="col-sm-4 mb-3">
      <label for="codiciPromozionali">Codici Promozionali</label>
      <p-multiSelect
        id="codiciPromozionali"
        name="codiciPromozionali"
        [(ngModel)]="campagna.codiciPromozionali"
        class="mb-3"
        defaultLabel=""
        maxSelectedLabels="3"
        [options]="codiciPromozionaliList"
        optionLabel="name"
        dataKey="code"
        selectedItemsLabel="{0} selezionati"
        filterPlaceHolder="Cerca..."
        [disabled]="!enableCodiciPromozionali()"
      >
      </p-multiSelect>
    </div>

TypeScript

getCodiciPromozionali() {    
this.codiciPromozionaliList = [];
if(this.campagna.levelId){      
  this.campagneService.getPromoCode(this.campagna.levelId)
  .subscribe(response => {
    response.body['result'].forEach((item: any) => {
      this.codiciPromozionaliList.push({
        name: item.codice,
        code: item.id,
      })
    });
  })
}

}

Answer 1

Angular 忽略对 codiciPromozionaliList 数组的更改，因为对该数组的引用未更改。您只需要通过创建新数组来触发 Angular 变化检测。

使用扩展运算符来做：

getCodiciPromozionali() {
    if (this.campagna.levelId) {
        this.campagneService.getPromoCode(this.campagna.levelId)
            .subscribe(response => {
                const result = [];
                response.body['result'].forEach((item: any) => {
                    result.push({
                        name: item.codice,
                        code: item.id,
                    });
                });

                this.codiciPromozionaliList = [...result];
            });
    }
}

或者您可以使用 Array.prototype.map()

    getCodiciPromozionali2() {
        if (this.campagna.levelId) {
            this.campagneService.getPromoCode(this.campagna.levelId)
                .subscribe(response => {
                    this.codiciPromozionaliList = response.body['result'].map((item: any) => ({
                            name: item.codice,
                            code: item.id,
                        }),
                    );
                });
        }
    }

具有模板驱动形式、动态选项的 primeNG p-multiSelect

primeNG p-multiSelect with template driven form, dynamic options

multi-select

primeng

angular

angular5