帶有模板驅動形式、動態選項的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>

打字稿

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,
                        }),
                    );
                });
        }
    }