Выбранное значение не отображается при выборе элемента mat-select с двумя радиогруппами внутри

Question

Я пытаюсь создать выпадающий список с двумя радиогруппами внутри.Это будет выглядеть примерно так:

Sort By:   
  Option 1
  Option 2
  Option 3

Order:
  Ascending
  Descending

Изображение выпадающего списка:

Слева: изображение того, кем я являюсьпытаясь добиться правильного: что происходит, когда я делаю выбор (значение заполнителя остается):

У меня есть стиль, который я хочу, но ясталкиваюсь с проблемой, при которой, когда я делаю выбор, раскрывающийся список не заполняется выбранным значением.Я хотел бы показать значение в радиогруппе 'Sort By:'.

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 значение вашего 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.Если вы хотите отобразить выбранные значения в элементе выбора ниже placeholder, вам нужно использовать привязку [value] для mat-options, но, как видно из вашего вопроса, это не то, что вам нужно.

Здесь - это стек всего этого.