Question

我正在尝试创建一个下拉列表，其中包含两个广播组。看起来像这样：

Sort By:   
  Option 1
  Option 2
  Option 3

Order:
  Ascending
  Descending

下拉菜单图片：

左：我要实现的目标的图像右：我进行选择时会发生什么（保留占位符的值）：

我有自己想要的样式，但是遇到一个问题，当我进行选择时，下拉列表中没有填充所选值。我想在“排序依据：”单选组中显示该值。

sample.component.html

<mat-form-field class="c-table-header__sort" (click)="sort()">
  <mat-select class="c-table-header__sort-select" placeholder="Sort">
    <mat-option class="c-table-header__sort-select-option">
      <div>Sort by</div>
      <mat-radio-group class="c-table-header__sort-select-option-rgroup__sort" #sortOptionGroup [(ngModel)]="radioData">
        <mat-radio-button name="order" class="c-table-header__sort-select-option-rgroup__sort-rbutt"
          *ngFor="let sort of sortOptions.options" [value]="sort">{{sort}}
        </mat-radio-button>
      </mat-radio-group>
      <div>Order</div>
      <mat-radio-group class="c-table-header__sort-select-option-rgroup__order" #sortOrderGroup [(ngModel)]="radioTwoData">
        <mat-radio-button name="sort" class="c-table-header__sort-select-option-rgroup__order-rbutt"
          *ngFor="let sort of sortOptions.order" [value]="sort">{{sort}}
        </mat-radio-button>
      </mat-radio-group>
    </mat-option>
  </mat-select>
</mat-form-field>

sample.component.ts （相关部分）

Component({
    ...
    encapsulation: ViewEncapsulation.None
})
export class BillPayScheduledDashboardComponent implements OnInit {

...

radioData;
radioTwoData; 

...   

    sort() { 
        console.log(this.radioData);
        console.log(this.radioTwoData);
    }

}

sample.component.css （相关部分）

.c-table-header__sort-select-option{
    min-width: 75px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.c-table-header__sort-select-option-rgroup__sort,
.c-table-header__sort-select-option-rgroup__order{
    display: flex;
    flex-direction: column;
}

在撰写本文时，我还想知道是否可以将所有这些形式化/更容易。赞赏任何见解/解决方案。

Answer 1

如果要将placeholder的{{1}}值设置为当前选定的单选按钮值，则可以这样做。

在您的组件中：

mat-select

在您的模板中：

radioData = '';
radioTwoData = ''; 

getPlaceholder(): string {
  if (!this.radioData && !this.radioTwoData) {
    return 'Sort';
  } else {
    return this.radioData + ' ' + this.radioTwoData;
  }
}

这将在您的<mat-select class="c-table-header__sort-select" [placeholder]="getPlaceholder()">中将所选选项显示为占位符。如果要在mat-select下面的select元素中显示选定的值，则需要使用placeholder的{{1}}绑定，但是从您的问题看来这不是什么你想要的。

Here 是这一切的堆积如山。

当从带有两个无线电组的垫选元素中进行选择时，所选值不显示

1 个答案: