Angular 2 Material：无法绑定到“值”，因为它不是“md-radio-button”的已知属性

Posted 2023-03-05

【中文标题】Angular 2 Material：无法绑定到“值”，因为它不是“md-radio-button”的已知属性

【英文标题】：Angular 2 Material: can't bind to 'value' since it isn't a known property of 'md-radio-button'

【发布时间】：2017-10-20 07:26:53

【问题描述】：

我正在运行来自here 的单选按钮示例，我确保遵循所有instruction，除了附录，因为我没有 这样的文件（我的应用是 cli 创建的）。

包含 html 模板后，我的应用将无法呈现，并且在控制台中出现错误：

无法绑定到“值”，因为它不是 'md-单选按钮

我的 ts 文件：

import  Component, OnInit  from '@angular/core';
import  SlidesService  from 'app/slides/slides.service';
import  Slide  from 'app/slides/slide';
import  Observable  from 'rxjs/Rx';
import  Subscription  from 'rxjs/Subscription';
import  MdButtonModule, MdCheckboxModule  from '@angular/material';

@Component(
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: ['./question.component.css']
)
export class QuestionComponent implements OnInit 

  constructor(private _slidesService: SlidesService)  
  slides: Slide[];
  currSlide: Slide;
  favoriteSeason: string;

  seasons = [
    'Winter',
    'Spring',
    'Summer',
    'Autumn',
  ];
  ngOnInit() 
    this._slidesService.getSlides()
      .subscribe(slides => 
        this.slides = slides
        this.currSlide = slides[0];

      ,
      error => console.log(<any>error));
  

我的 html 文件：

<div class="well well-lg" *ngIf='slides && slides.length'>
  <img [src]='slides[0].imageUrl'>
  <h1>currSlide.SongTitle</h1>
  <md-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
    <md-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
      season
    </md-radio-button>
  </md-radio-group>
  <div class="example-selected-value">Your favorite season is: favoriteSeason</div>
</div>

应用模块：

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';
import  HttpModule  from '@angular/http';
import  AlertModule  from 'ngx-bootstrap';
import  CarouselModule  from 'ngx-bootstrap/carousel';
import  AppComponent  from './app.component';
import  SlidesComponent  from './slides/slides.component';
import  SlidesService  from './slides/slides.service';
import  QuestionComponent  from './question/question.component';
import  MdButtonModule, MdCheckboxModule  from '@angular/material';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  FormControl, FormGroup  from '@angular/forms';
import  MaterialModule  from '@angular/material';
import  ReactiveFormsModule  from '@angular/forms';
@NgModule(
  declarations: [
    AppComponent,
    SlidesComponent,
    QuestionComponent
  ],
  imports: [ReactiveFormsModule, MaterialModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCheckboxModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(),
    CarouselModule.forRoot()
  ],
  providers: [SlidesService],
  bootstrap: [AppComponent]
)
export class AppModule  

感谢您提出解决此问题的建议。

【问题讨论】：

MdButtonModule（实际上是所有你的材料模块）应该被导入AppModule，或者这个组件所在的任何包含模块在那个模块imports数组中. NOT 在组件中。这里所有的import 语句都是导入“sybmol”。您实际上并没有在任何地方使用它，也不可能在组件中这样做。

@NeilLunn - 我不确定，所以我实际上在该组件 ts 文件和 AppModule（和导入数组）中都导入了符号。在您发表评论后，我尝试从组件中删除导入并将其仅留在 AppModule 中 - 但我得到了同样的错误

@belgi 你可以添加你的 appModule 定义吗？看起来您缺少添加一些声明，例如 CommonModule 或 FormModule

是的。如前所述，缺少MdRadioModule。

【参考方案1】：

由于这似乎还没有得出结论，我想我会提供答案，ALL归功于尼尔伦！

正如 Sajeetharan 的回答适用于导入的 MaterialModule，但正如 Neil Lunn 所说：

你应该只导入“必需”的模块

否则

这将导致构建的捆绑包更大。

因此，只需将MdRadioModule 导入您的应用模块并将其添加到imports 数组即可解决：

import  MdRadioModule  from '@angular/material';

imports: [
  ....
  MdRadioModule, 
  ....
],

【参考方案2】：

您必须在 appModule 中导入 MdRadioModule，并将其粘贴到 imports 下。