Угловой 2/Материал 2 не может реализовать компонент select

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Начало работы.

Насколько я знаю, вы пытаетесь использовать угловой 1 компонент материала внутри углового кода 2.

EDIT:

После просмотра связанного демо-приложение, он появляется для этого демонстрационного они добавляют некоторые компоненты, которые еще не выпущены. Вероятно, поэтому вы не можете сделать md-select работу над вашим проектом: если вы не добавите соответствующие файлы вручную, у вас нет источника, который они используют в своей демонстрации.

Если вам действительно нужно, соответствующие файлы находятся на dist/@angular/material/select внутри репозитория demo-app. Вы должны иметь возможность использовать md-select, скопировав эту папку в папку nodes_modules/@angular/material в вашем проекте.

Однако я сильно препятствовать этот вариант, потому что если он еще не выпущен, это означает, что он может глубоко изменить до финального релиза, который будет означать necesseraly рефакторинг для вас в это время.