Angular Material Autocomplete 组件

autocomplete

举个栗子
invite.component.html文件

<form>
  <h3 md-dialog-title>邀请组员</h3>
  <div md-dialog-content>
    <md-input-container>
      <input mdInput type="text" placeholder="组员姓名" [mdAutocomplete]="autoMembers">
    </md-input-container>
  </div>
  <div md-dialog-actions></div>
</form>
<md-autocomplete #autoMembers="mdAutocomplete" [displayWith]="displayUser">
  <md-option *ngFor="let item of items"[value]="item">{{item.name}}</md-option>
</md-autocomplete>

invite.component.ts文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-invite',
  templateUrl: './invite.component.html',
  styleUrls: ['./invite.component.css']
})
export class InviteComponent implements OnInit {

  items = [
    {
      id: 1,
      name:'zhangsan'
    },
    {
      id: 2,
      name: 'lulu'
    },
    {
      id: 3,
      name: 'xiaomei'
    },
    {
      id: 6,
      name: 'liba'
    }
  ];
  constructor() { }

  ngOnInit() {
  }
  displayUser(user: { id: string;name:string}) {
    return user ? user.name : '';
  }

}
这个学到了聪明组件和笨组件哎~~