Angular 4 mat-form-field with mat-select

Question

所以，我在使用 mat-select 和 mat-form-field 时遇到问题。将 mat-form-field 与 mat-input 一起使用不是问题，而且我相当确定我的导入也是正确的，但是在尝试使用 mat-select 时收到以下错误:

Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native...

我的 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>

包含此组件并导入到我的主 app.module.ts 文件中的我的 View 模块如下:

...
import { MatFormFieldModule, MatInputModule, MatSelectModule } from 
   '@angular/material';
...

@NgModule({
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
})
export class ViewModule {}

我的主 app.module.ts 文件包括 ViewModule 和 NoConflictStyleCompatibilityMode 导入，如下所示:

...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
})
export class AppModule { }

当我从 mat-select 周围移除 mat-form-field 时，错误消失了，但我发现 mat-input(使用 mat-form-field)和 mat-select 的样式不一致。我正在导入 MatSelectModule 和 MatFormFieldModule，但出现此错误。我还为 Angular Material 2 更新了我的 npm，以便它拥有最新和最好的，但仍然没有。我忽略了什么？我已经在最近的 stackoverflow 中看到此类问题得到解决，但我已经尝试过每个解决方案，但都没有成功。

mat-select Not Working Properly
mat-form-field must contain a MatFormFieldControl

Answer 1

我遇到了类似的问题，来自这个 issue在 github 上我意识到 ngIf 不能在 mat-select 上。

这可能对某些人有帮助:

Make sure you don't have an ngIf on your mat-select.