Angular 2 / Material 2 无法实现 select 组件

Question

我正在尝试根据 Material 2 演示应用程序中给出的示例实施 select 下拉列表，但出现以下错误。任何帮助都会很棒。

分量：

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 所说，Angular Material 2.

目前没有可用的 md-select

你能 link 你正在谈论的演示应用程序吗？这是我找到的，https://material2-app.firebaseapp.com/ , linked from https://github.com/angular/material2 入门。

据我所知，您正试图在 angular 2 代码中使用 angular 1 material 组件。

编辑：

查看 linked 演示应用程序后，他们似乎为该演示添加了一些尚未发布的组件。这可能就是为什么你不能让 md-select 在你的项目上工作：除非你手动添加相关文件，否则你没有他们在演示中使用的源代码。

如果您非常需要，相关文件位于演示应用程序库内的dist/@angular/material/select。通过将此文件夹复制粘贴到项目的 nodes_modules/@angular/material 文件夹中，您应该能够使用 md-select。

但是我强烈反对这个选项，因为如果它还没有发布，这意味着它可能会在最终发布之前发生深刻的变化，这意味着您此时需要进行重构。

Angular 2 / Material 2 无法实现 select 组件

Angular 2 / Material 2 cannot implement select component

angular

angular2-forms

angular-material2