垫选择多个rtl方向显示反向选择的项目文本

Question

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

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

我将direction设置为rtl，

按选择键以正确的顺序显示项目，但显示所选项目的内部文本向后显示。

例如：

输入中的显示文本：

ג,ב,א 

代替

א,ב,ג 

My Mat Select Example

有什么想法吗？

Answer 1

您可以在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 2

这是希伯来语/ rtl的CSS修复程序

/*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 3

尝试在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 4

您可以添加CSS类：

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

为了更好地显示。 StackBlitz HERE

演示：