Mat-select多个rtl方向显示反向selected items text

Question

我将 Mat-select 与 multiple 选项一起使用

我使用自定义订单管道订购我的数据。

我将 direction 设置为 rtl ,

mat-select 以正确的顺序显示项目，但显示 selected 项目的内部文本倒退。

例如：

输入中的显示文字：

ג,ב,א

而不是

א,ב,ג

My Mat Select Example

有什么想法吗？

Answer 1

在你component.css

中尝试为.mat-form-field{text-align: right}添加样式

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

如果没有工作风格，你可以这样做：

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

或

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

Answer 2

您可以添加 CSS class:

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

为了更好的展示。 StackBlitz HERE

演示：

Answer 3

您可以在 mat-select

中使用 mat-select-trigger

并显示选中的他们的值。

您的代码如下所示：

  <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

这是 css hebrew/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; }

Mat-select多个rtl方向显示反向selected items text

Mat-select multiple rtl direction display reverse selected items text

right-to-left

angular-material

angular