角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;  

}