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，使其看起来很奇怪。有什么办法吗？

Answer 1

我错误地将 Holder [in camelCase] 而不是 placeholder，它只是忽略了这一点！！！

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

Answer 2

我真傻，我忘了在我的app.module.ts 中导入 MatSelectModule。

Answer 3

消息说您的选择必须在 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