Angular Material md-autocomplete不適用於從Angular1演示中恢復的Angular2代碼

Question

我正在使用ng2-material在Angular2應用中啟用Material Design。 它似乎是Angular1 MD代碼的包裝。 很多作品，但我不能使md-autocomplete起作用。 問題是：1. Home組件無法加載。 2.出現控制台錯誤-未定義loadAll（），3.刪除JS進行加載時，沒有表單輸入框出現，4.在Atom編輯器中出現打字稿錯誤，每個函數語句均期望'; ' 之前 {

很抱歉有這么多代碼，但我希望問題很簡單。
從MD示例復制的HTML為：

 <md-list-item layout="column" class= "md-padding">
    <form (click)="$event.preventDefault()"> 
      <md-autocomplete
        md-selected-item="selectedItem"
        md-search-text-change="searchTextChange(searchText)"
        md-search-text="searchText"
        md-selected-item-change="selectedItemChange(item)"
        md-items="item in querySearch(searchText)"
        md-item-text="item.display"
        md-min-length="0"
        <md-item-template>
          <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No "{{searchText}}" language was found.
        </md-not-found>
        STATE
      </md-autocomplete>
    </form>
  </md-list-item>

material.angularjs.org/latest/demo上的示例還具有Angular1 javascript。 我嘗試通過以下方式將其轉換為Angular2：1.刪除ctrl，2.將“ this”語句放入Constructor（）中，3.將功能語句更改為對象表示法，但保留邏輯，4.將$ log更改為控制台。日志，5.在未使用的查詢中刪除了$ q並替換為console.log。 所以我的Angular2代碼是：

export class Home {
constructor () {
var self = this;
self.simulateQuery = false;
self.isDisabled    = false;
// list of `state` value/display objects
self.states = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need " + state + " first!");
}
querySearch (query, string) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
    deferred;
if (self.simulateQuery) {
  console.log('self.simulateQuery is now true ' + text);;
} else {
  return results;
}
}
searchTextChange(text, string) {
console.log('Text changed to ' + text);
}
selectedItemChange(item, string) {
console.log('Item changed to ' + JSON.stringify(item));
}
loadAll(state, string) {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware';
return allStates.split(/, +/g).map( function (state) {
  return {
    value: state.toLowerCase(),
    display: state
  };
});
}

createFilterFor(query, string) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
  return (state.value.indexOf(lowercaseQuery) === 0);
};
}

} //end of constructor()
} //end of Home

Answer 1

在用於各種輸入類型的ng2-materials示例頁面上， https: //justindujardin.github.io/ng2-material/#/components/input，我終於發現<>符號打開了工作示例以暴露代碼。 這與我上面的轉錄嘗試有很大不同。 但是該示例代碼有效。