0

尝试在 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>

结果显示如下

结果

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

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

下面是我的 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 { }

选择控件不可见 干扰 UI

4

2 回答 2

0

您可能需要添加 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来探索更多。

于 2022-01-09T13:55:14.033 回答
0

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

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

但总的来说，您css是造成这种情况的原因。

于 2022-01-09T12:10:42.043 回答