Mat-select 控件在 html 中不起作用

Question

当尝试在 html 中使用 mat-select 时......它不起作用。

<mat-form-field appearance="fill">
      <mat-select>
        <mat-option value="one">First option</mat-option>
        <mat-option value="two">Second option</mat-option>
      </mat-select>
    </mat-form-field>

结果显示如下

results

P.S 我已导入 import {MatNativeDateModule} from '@angular/material/core'; 并在 app.module.ts 文件中的导入下添加了 MatNativeDateModule

在 app.module.ts 文件和导入部分中添加 MatSelectModule 后，现在 select 控件和选项不可见。

下面是我的app.module.ts文件

import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    
  ],
  imports: [
    BrowserModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule,
    MatSelectModule,
    MatFormFieldModule,
    BrowserAnimationsModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Select control not visible Disturb UI

Answer 1

这是您必须从 css 中删除的部分：

:host {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

但总的来说是您的 css 造成了这种情况。

Answer 2

您可能需要添加 Angular Material 核心主题。您可以通过在项目 angular.json 文件的样式数组中添加一个条目来添加一个预建主题：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    ...
    "assets": [
      ...
    ],
    "styles": [
      "src/styles.scss",
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
    ],
 ...
}

添加上述条目后，要反映更改，您应该重新启动服务器。

如果您仍然遇到问题，您可以尝试在全局 styles.css 文件中添加主题：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

您可以参考 https://material.angular.io/guide/theming 以探索更多内容。

Mat-select 控件在 html 中不起作用

Mat-select control is not working in html

select

angular

mat-select