Angular 2：如何動態更改下拉列表的選擇

Question

我有一個主/細節場景，在選擇產品時顯示細節。詳細信息屏幕包含一個包含各種顏色的下拉菜單，可以選擇這些顏色來更改所顯示產品的顏色。

下拉數據源是一個靜態數組，它以固定順序填充下拉列表 - 例如，白色，黑色，黑色鋼。因此，不管首先選擇的產品的顏色如何，下拉菜單的第一個選項始終爲白色。我希望它能反映所選產品的顏色。

長話短說，我該如何動態選擇下拉選項？

這是創建下拉列表的代碼段。

 <div class="panel-body form-group"> 
      <p-dropdown [options]="colors" [(ngModel)]="selectedColor" 
      name="selectedColor" (onChange)="changeProductColor()"> 
      <ng-template let-color pTemplate="item"> 
       <div class="ui-helper-clearfix"> 
       <img src="..\assets\image\{{color.value}}.jpg" /> 
       <div> 
        {{color.label}} 
       </div> 
       </div> 
      </ng-template> 
      </p-dropdown> 
     </div> 

Answer 1

我使用一個臨時解決方案通過動態重新創建的顏色陣列和設置所需的顏色陣列的第一個元素。過濾數組將是一個更好的方法，但不能讓它遵守，所以我訴諸循環。

filterColors(color: string) { 
let tmp: SelectItem[] = []; 

for (let i = 0; i < this.colors.length; i++) { 
    if(this.colors[i].value == color) { 
    tmp[0] = this.colors[i]; 
    } 
} 

for (let i = 0, t=1; i < this.colors.length; i++) { 
    if(this.colors[i].value !== color) { 
    tmp[t++] = this.colors[i]; 
    } 
} 

// console.log("xxx = " + this.colors.filter(color => color.value == color)); 
this.colors = tmp;  

}