Question

由于某种原因，使用Angular 8时，此参数永远不会在垫选中对我不起作用。

<mat-form-field appearance="outline" floatLabel="never">
   <mat-label>Lesson</mat-label>
   <mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
   <mat-option value="T1">Lesson 1</mat-option>
   <mat-option value="T2">Lesson 2</mat-option>
   <mat-option value="T3">Lesson 3</mat-option>
   </mat-select>
</mat-form-field>

始终和自动一起工作，但似乎永远不会消失。

Answer 1

设法提出以下scss来模仿不浮动的标签：

.some-custom-class-name {
  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: none;
    width: initial;
    opacity: 0;
  }
  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
    border-top-color: initial;
  }
  /* Not required, only used to reposition the label slightly
  &.mat-form-field-appearance-outline .mat-form-field-label {
    top: 1.54375em;
    margin-top: -0.25em;
  }
  */
}

<mat-form-field appearance="outline" class="some-custom-class-name">
  <mat-label>Shouldn't float</mat-label>
  <input matInput>
</mat-form-field>

只需将some-custom-class-name类附加到mat-form-field，它就可以工作。

Answer 2

尝试使用floatLabel="never"或floatLabel="always"

Answer 3

我的解决方案有点像解决方案 suggest by Dane Brower 的捷径。

  ::ng-deep &.mat-form-field-appearance-outline.mat-form-field-should-float {
    .mat-form-field-label {
      display: none;
    }

    .mat-form-field-outline-gap {
      border-top-color: initial;
    }
  }

与他的解决方案相比，这个解决方案只是从 DOM 中删除了标签元素（通过 display: none），因为我们不再需要它了。我们还需要 ::ng-deep 伪类，因为 mat-form-field-... 元素封装在 mat-form-field 中。

_{注意：你必须小心使用 ::ng-deep 并尝试在它前面加上 :host 以不全局应用它的样式（在我的例子中 :host ::ng-deep 没有在这里工作）。}

mat-form-field floatLabel =“ never”不起作用

3 个答案: