Мат-выберите несколько RTL направление отображения обратного текста выбранных элементов

Question

Я использую Mat-select с опцией multiple

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

Я установил direction в rtl,

mat-select отображает элементы в правильном порядке, но внутренний текст, отображающий выбранные элементы, отображается в обратном направлении.

Например:

Отображаемый текст ввход:

ג,ב,א 

вместо

א,ב,ג 

Пример выбора My Mat *

Есть идея?

Answer 1

здесь css исправление для иврита / rtl

/*mat select rtl*/
.mat-form-field-label, .mat-select-value{text-align: right}
.mat-option { direction: rtl; }
.mat-option-text {margin-right: 10px;text-align: right; }

Answer 2

Вы можете добавить класс CSS:

.mat-option {
  text-align: left!important;
}

, чтобы улучшить отображение. StackBlitz ЗДЕСЬ

DEMO:

Answer 3

вы можете использовать mat-select-trigger внутри вашего mat-select

и отображать значение выбранных их.

ваш код будет выглядеть так:

  <mat-select name="subjectCtrl"
                    multiple
                    #subjectCtrl='ngModel'
                    required
                    [(ngModel)]="selectedSubjectsList">
          <mat-select-trigger>
              selectedText
          </mat-select-trigger>
          <mat-option *ngFor="let subject of subjectList"
                      [value]="subject.Code">
            {{subject.Desc}}
          </mat-option>
</mat-select>

Answer 4

Попробуйте добавить стиль к .mat-form-field{text-align: right} в вашем component.css

.mat-form-field {
  text-align: right
}

Если не работают стили, вы можете сделать это так:

.mat-form-field {
  text-align: right!important
}

или

   /deep/.mat-form-field {
      text-align: right
    }