web-dev-qa-db-ja.com

Angular 2 Material： 'md-radio-button'の既知のプロパティではないため、 'value'にバインドできません

here からラジオボタンの例を実行しています。このようなファイルがないため、付録を除き、すべての instruction に従うようにしました（私のアプリは作成されたcli）。

Htmlテンプレートを含めると、アプリがレンダリングされず、コンソールにエラーが表示されます。

'md-radio-buttonの既知のプロパティではないため、' value 'にバインドできません

私の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>

AppModule：

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 { }

この問題を解決するための提案をお願いします。

angularradio-buttonangular-material
5
Belgi

これは結論に至っていないように思えるので、私は答えを提供すると思いました[〜＃〜] all [〜＃〜]クレジットはニール・ルンになります！

Sajeetharanの答えはインポートされたMaterialModuleで動作しますが、Neil Lunnが述べたように：

「必須」モジュールのみをインポートする必要があります

そうでなければ

これにより、ビルドのバンドルが大きくなります。

したがって、これはMdRadioModuleをアプリモジュールにインポートし、imports配列に追加することで簡単に解決できます。

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

imports: [
  ....
  MdRadioModule, 
  ....
],
6
AJT82

MdRadioModuleをappModuleにインポートし、importsの下に貼り付ける必要があります。

3
Umesh Patadiya