Angular Material mat-checkbox 未显示答案

【问题标题】：Angular Material mat-checkbox not showingAngular Material mat-checkbox 未显示
【发布时间】：2022-03-02 00:46:31
【问题描述】：

我目前正在尝试在我身边实现 Angular Material Checkboxes，但由于某种原因它对我不起作用。盒子没有出现。有人可以查看我的代码和导入吗？

这些是我目前的导入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatCheckboxModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我尝试创建盒子的代码：

<section class="example-section">
    <mat-checkbox class="example-margin">Check me!</mat-checkbox>
  </section>

【问题讨论】：

您有任何控制台错误吗？或者你能在 stackblitz 上重现它吗？

标签： angular angular-material

【解决方案1】：

您的代码看起来没有问题，您的项目中应该还有其他一些问题。我在 stackblitz 上创建了一个简单的复选框示例，导入量非常少： https://stackblitz.com/edit/angular-umypmc

TS：

import './polyfills';

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {CheckboxOverviewExample} from './app/checkbox-overview-example';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule
  ],
  declarations: [CheckboxOverviewExample],
  bootstrap: [CheckboxOverviewExample]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

HTML：

<section class="example-section">
  <mat-checkbox class="example-margin">Check me!</mat-checkbox>
</section>

【讨论】：

创建了一个新项目并使用了您的导入，但由于某种原因它仍然对我不起作用
你检查过我附加的stackblitz吗？
是的，我做到了，它帮助很大，我意识到我在设置整个项目时犯了一个错误。感谢您的帮助。
@Kyh 只是问你介意分享你犯了什么错误吗？我的复选框也没有显示。

【解决方案2】：

你必须添加

import {MatCheckboxModule} from '@angular/material/checkbox';

到你的 app.module.ts 中，并在@NgModule 中导入该模块，如下所示：

import {MatCheckboxModule} from '@angular/material/checkbox';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule
  ],
  ...
})

【讨论】：

看来OP已经做了这些事情了。