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;  

}