从内部有两个单选组的 mat-select 元素中选择时未显示所选值

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

如果您想将mat-select 的placeholder 值设置为当前选定的单选按钮值，您可以这样做。

在您的组件中：

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 中的占位符。如果您想在placeholder 下方的选择元素中显示选定的值，则需要使用[value] 绑定mat-options，但从您的问题看来，这不是您想要的。

Here 是所有这一切的堆叠闪电战。