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

如何动态更改下拉列表的选择

1 个答案: