角度材料6.2.1"mat-form-field-infix"覆盖宽度

Question

如何180px在mat-form-field-infix没有自定义css的情况下覆盖默认宽度

              <mat-form-field fxFlex>
                <mat-select>
                  <mat-option>{{ option.test}}</mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field fxFlex>
                <input matInput>
              </mat-form-field>

全屏输出

但小屏幕显示水平滚动条

堆

"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/flex-layout": "^6.0.0-beta.16",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",

谢谢

Answer 1

我发现的最接近的是对表单字段使用样式绑定：

 <mat-form-field appearance="outline" [style.width.px]="200">

否则它使用自定义 css 的旧方法......就像这样：

将属性添加class="datepicker"到您的<mat-form-field>css do 中

.datepicker {width:200px;}

我遇到了类似的问题，我的一个表单字段比其他字段大，这就是我解决这个问题的方法。请参阅此处的日期选择器表单字段stack blitz：

Answer 2

在我的解决方案中，我使用 ElementRef 来覆盖 mat-form-field-infix 的宽度：

   <mat-form-field
       ＃场地
   </mat-form-field>

然后在组件中：

@ViewChild('field', { read: ElementRef }) field: ElementRef;

ngOnInit() {
    var el = this.field.nativeElement.querySelector('.mat-form-field-infix');
    el.style.width = 'auto';
}

我认为尽管这不符合您的要求“没有自定义CSS”。但也许这对你有帮助。