【问题标题】:Radio button not recognized in Angular 9Angular 9 中无法识别单选按钮
【发布时间】:2020-08-18 14:00:50
【问题描述】:

我已将 Angular 从版本 8 更新到 9。我观察到在 app.module.ts 中,以下内容发生了变化

import { MatRadioModule } from '@angular/material';

import { MatRadioModule } from '@angular/material/radio';

现在,我在 ng build 上收到以下错误。

  1. 如果“mat-radio-button”是 Angular 组件,则验证它是否是该模块的一部分。
  2. 如果“mat-radio-button”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。

我尝试将 CUSTOM_ELEMENTS_SCHEMA 或 NO_ERRORS_SCHEMA 添加到应用模块,但没有成功。

import { NO_ERRORS_SCHEMA } from '@angular/core';
schemas: [NO_ERRORS_SCHEMA]

会有什么问题?谢谢!!

更新:

我在这里发现了类似的问题: Angular compilation fails after upgrade to Angular v9 and enabling Ivy

【问题讨论】:

  • 您是否将MatRadioModule 包含在imports 数组中的app.module.ts 文件中??
  • 您的组件在哪个模块中注册/声明?如果是 app.module.ts 然后检查导入:[MatRadioModule]
  • @ManiRaj 是的,我已将 MatRadioModule 包含在 app.module.ts 的导入数组中

标签: angular typescript angular-material angular9


【解决方案1】:

问题是您在未导入 MatRadioModule 的模块中使用 <mat-radio-button></mat-radio-button>

首先,您需要将angular/materialangular/cdk 作为依赖项添加到您的项目中。

要正确导入MatRadioModule,请确保将其导入到您正在使用<mat-radio-button></mat-radio-button>的模块中

像这样:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MatRadioModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

现在我可以像这样在我的模板中使用它:(AppModule 内)

<mat-radio-button></mat-radio-button>

示例:https://stackblitz.com/edit/angular-c8kmds

确保您遵循所有这些步骤,并确保 MatRadioModule 已导入正确的 Module

【讨论】:

  • 仍然面临同样的问题。
  • @Pearl 如果可以,请尝试在 stackblitz 上创建该问题的复制器。我怀疑升级到 V9 并没有改变所有的导入并且搞砸了一些东西。错误消息应该会提示您错误发生的位置。
  • 在 url:github.com/angular/components/issues/18489 中,他使用 ([ngModel]) 而不是 [(ngModel])?能解决问题吗?
  • [(ngModel)] 是双向绑定属性的正确方法,如果没有可重现的示例,就无法判断您的应用程序出了什么问题。
  • Mike,我遇到了类似的问题,希望对您有所帮助:stackoverflow.com/questions/59931739/…
猜你喜欢
  • 1970-01-01
  • 2014-08-06
  • 1970-01-01
  • 2020-09-06
  • 1970-01-01
  • 1970-01-01
  • 2020-10-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多