アングル2 /マテリアル2は選択コンポーネントを実装できません

Question

マテリアル2デモアプリケーションで指定された例から選択ドロップダウンを実装しようとしていますが、次のエラーが発生しています。どんな援助も素晴らしいだろう。

コンポーネント：

import { Component } from '@angular/core'; 
import { NgForm, FormControl } from '@angular/forms'; 

import { Tenant } from '../../shared/models/tenant.model'; 

import { InviteTenantHttp } from './invite-tenant-http.service'; 

@Component({ 
    selector: 'invite-tenant', 
    templateUrl: './invite-tenant.component.html', 
    styleUrls: ['./invite-tenant.component.scss'] 
}) 

export class InviteTenantComponent { 
    model = new Tenant('', null, ''); 

    constructor(
    private inviteTenantHttp: InviteTenantHttp 
) {} 

    tenantGroups = [ 
    { value: 'group1', viewValue: 'group-1' }, 
    { value: 'group2', viewValue: 'group-2' }, 
    { value: 'group3', viewValue: 'group-3' } 
    ]; 

    submit(form: NgForm) { 
    this.inviteTenantHttp.post(this.model) 
     .subscribe(
     data => { 
      console.log(data); 
     }, 
     error => console.log(error) 
    ); 
    } 
} 

コンポーネントテンプレート：

<div class="invite-tenant-container"> 
    <header class="invite-tenant-header"> 
    <div class="invite-tenant-site-info"></div> 
    <div class="invite-tenant-cyber-score"></div> 
    </header> 
    <section class="invite-tenant-content"> 
    <h3>Invite Tenant to //Site Name\\</h3> 
    <form #form="ngForm" (submit)="submit(form)" novalidate> 
      <md-input 
       type="email" 
       name="email" 
       [(ngModel)]="model.username" 
       placeholder="Email" 
       required> 
      </md-input> 
      <md-input 
       type="password" 
       name="password" 
       [(ngModel)]="model.password" 
       placeholder="Password" 
       required> 
      </md-input> 
      <md-select 
       placeholder="Tenant Group" 
       [(ngModel)]="model.tenantGroup" 
       #tenantControl="ngModel"> 
       <md-option *ngFor="let group of tenantGroups" [value]="group.value"> 
        {{ group.viewValue }} 
       </md-option> 
      </md-select> 
      <button type="submit">submit</button> 
     </form> 
    </section> 
</div> 

モデル：

以下

export class Tenant { 
    constructor(
    public username: string, 
    public password: number, 
    public tenantGroup: string 
) {} 
} 

デモアプリケーションの実装からコンポーネントおよびテンプレートです：

コンポーネント：

<md-card> 
    <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" 
     #drinkControl="ngModel"> 
     <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled"> 
     {{ drink.viewValue }} 
     </md-option> 
    </md-select> 
    <p> Value: {{ currentDrink }} </p> 
    <p> Touched: {{ drinkControl.touched }} </p> 
    <p> Dirty: {{ drinkControl.dirty }} </p> 
    <p> Status: {{ drinkControl.control?.status }} </p> 
    <button md-button (click)="currentDrink='sprite-1'">SET VALUE</button> 
    <button md-button (click)="isRequired=!isRequired">TOGGLE REQUIRED</button> 
    <button md-button (click)="isDisabled=!isDisabled">TOGGLE DISABLED</button> 
    </md-card> 

</div> 

コンポーネント：作業のデモの

import {Component} from '@angular/core'; 
import {FormControl} from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'select-demo', 
    templateUrl: 'select-demo.html', 
    styleUrls: ['select-demo.css'], 
}) 
export class SelectDemo { 
    isRequired = false; 
    isDisabled = false; 
    currentDrink: string; 
    foodControl = new FormControl(''); 

    foods = [ 
    {value: 'steak-0', viewValue: 'Steak'}, 
    {value: 'pizza-1', viewValue: 'Pizza'}, 
    {value: 'tacos-2', viewValue: 'Tacos'} 
    ]; 

    drinks = [ 
    {value: 'coke-0', viewValue: 'Coke'}, 
    {value: 'sprite-1', viewValue: 'Sprite', disabled: true}, 
    {value: 'water-2', viewValue: 'Water'} 
    ]; 

    toggleDisabled() { 
    this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable(); 
    } 

} 

更新されたイメージ：

Answer 1

Camden_kidで言ったように、何の角度素材で今のところ利用できるmd-select 2.

はありませんあなたが話しているデモアプリケーションをリンクしてもらえますか？ここに私が見つけたのがhttps://material2-app.firebaseapp.com/で、https://github.com/angular/material2からリンクしています。はじめに。

私が知る限り、角度2のコードの中に角度1の材料成分を使用しようとしています。

EDIT：リンクデモアプリを見た後

、このデモのために、彼らはまだリリースされていないいくつかのコンポーネントを追加表示されます。これはたぶんプロジェクトでmd-selectを動作させることができない理由です。関連するファイルを手動で追加しない限り、デモで使用するソースはありません。

が必要な場合は、関連するファイルはdemo-appレポ内のdist/@angular/material/selectにあります。プロジェクト内のnodes_modules/@angular/materialフォルダ内にこのフォルダをコピーして貼り付けて、md-selectを使用することができます。

しかしそれはまだリリースされていない場合、それはそれは、この時点であなたのためのnecesseralyリファクタリングを意味し、最終的なリリース、前に深く変わることを意味するので、私は強く、このオプションを落胆。