mat-select不正常工作

Question

mat-select元素表现得很有趣。见下文。

代码

<mat-form-field>
    <input matInput placeholder="Name" #NameInput>
</mat-form-field>

<mat-select placeholder="How Many?">
    <mat-option>One</mat-option>
    <mat-option>Two</mat-option>
    <mat-option>Three</mat-option>
    <mat-option>Four</mat-option>
    <mat-option>Five</mat-option>
</mat-select>

结果

将mat-select包裹在mat-form-field中会出现以下错误：

  

mat-form-field必须包含MatFormFieldControl。你忘记了吗？   将matInput添加到本机输入或textarea元素？

但是，input matInput包括input同时显示mat-select和50%，使其看起来很奇怪。有什么方法吗？

Answer 1

消息显示您的选择必须位于mat-form-field中，而不是与输入相同的mat-form-field。试试这个：

<mat-form-field>
    <input matInput placeholder="Name" #NameInput>
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="How Many?">
        <mat-option>One</mat-option>
        <mat-option>Two</mat-option>
        <mat-option>Three</mat-option>
        <mat-option>Four</mat-option>
        <mat-option>Five</mat-option>
    </mat-select>
</mat-form-field>

在他们如何做的文档中：https://material.angular.io/components/form-field/overview

Answer 2

愚蠢的我，我忘了在我的app.module.ts中导入MatSelectModule。

Answer 3

我错误地将[strong> H 更旧[在camelCase中]而不是placeholder，它只是忽略了这一点!!!

很难找到！但是一旦我改为placeholder，我就能看到它。只是想分享，以防你也可能遇到..