所以,我在mat-form-field中使用mat-select时遇到了问题.使用mat-form-field和mat-input不是问题,我相当确定我的导入也是正确的,但是在尝试使用mat-select时我收到以下错误:
错误:md-form-field必须包含MdFormFieldControl.您是否忘记将mdInput添加到本机...
我的HTML代码如下:
<mat-form-field class="full-width">
<mat-select name="sampleType" formControlName="sampleTypeCtrl"
placeholder="Sample Type" required>
<mat-option *ngFor="let sample of samples" [value]="sample.value">
{{ sample.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
我的视图模块包含此组件并导入到我的主app.module.ts文件中,如下所示:
...
import { MatFormFieldModule, MatInputModule, MatSelectModule } from
'@angular/material';
...
@NgModule({
imports: [
...
MatInputModule,
MatFormFieldModule,
MatSelectModule,
...
],
})
export class ViewModule {}
Run Code Online (Sandbox Code Playgroud)
我的主app.module.ts文件包含ViewModule和NoConflictStyleCompatibilityMode导入,如下所示:
...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
...
imports: [
ViewModule,
NoConflictStyleCompatibilityMode
],
...
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)
当我从mat-select周围移除mat-form-field时,错误消失了,但是我对mat-input(使用mat-form-field)和mat-select的样式不一致.我正在导入MatSelectModule和MatFormFieldModule,但我收到此错误.我还更新了我的npm角度材料2,以便它具有最新和最好的,但仍然没有.我在俯瞰什么?我已经看到在最近的stackoverflows中解决了这种类型的问题,但我已经尝试过的每个解决方案都没有运气.
拼命想在角度2的材料设计中找到md-dialog-container的选择器但没有成功.
我可以在没有问题的情况下对chrome的f12进行更改,但是使用css中的有效选择器执行这些更改是一个问题.研究/深/但现在已弃用.
我曾尝试md-dialog-container {},md-dialog-container.md-dialog-container{}以及md-dialog-container.md-dialog-container[role="dialog"]没有成功.
随附的是我在铬的f12中进行这些更改的图像没有问题.
https://plnkr.co/edit/aUYfOBJ0MdywKW2pphOM?p=preview
<md-select placeholder="food" style=""><!-- no width stylings that work -->
<md-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</md-option>
</md-select>
Run Code Online (Sandbox Code Playgroud)
请看上面的plunker.使用'food'的占位符来设置md-select的宽度有很多困难.为什么我不能在md-select标签中做一个style =""?我尝试使用没有响应的类来定位这个相同的div.我也尝试使用.md-select-trigger类,它在chrome,firefox和edge的F12工具中可见.没有.
唯一有效的方法是取消选择浏览器工具区域中可用的.md-select-trigger类的最小宽度或弹性空间.
我不确定我在这里处理什么.