Angular Material md-autocomplete不适用于从Angular1演示中恢复的Angular2代码

Question

I am using ng2-material to enable Material Design in an Angular2 app. It seems to be a wrapper over the Angular1 MD code. Lots works, but I can't get md-autocomplete to work. The problems are: 1. the Home component does not load. 2. get a Console error - loadAll() is not defined, 3. no form input box appears when I remove the JS to get something to load, 4. get a typescript error in Atom editor that each function statement expects ' ; ' before the {

Sorry for so much code, but I'm hoping the problem(s) is simple.
The HTML copied from the MD example is:

 <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>

The example at material.angularjs.org/latest/demo also has Angular1 javascript. I tried to convert it to Angular2 by: 1. removing ctrl, 2.put the "this" statements in constructor(), 3.changed the function statements to object notation, but kept the logic, 4.changed $log to console.log, 5. removed $q in an unused query and replaced with console.log. So my Angular2 code is:

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

At the ng2-materials Example page for various types of input, https://justindujardin.github.io/ng2-material/#/components/input , I finally discovered that the <> symbol opens the working examples to expose the code. It is significantly different than my above attempt to transcribe. But that example code works.