Question

我正在使用ng2-material在Angular2应用中启用Material Design。它似乎是Angular1 MD代码的包装器。很多工作，但我不能让md-autocomplete工作。问题是：1。Home组件没有加载。 2.获取控制台错误 - 未定义loadAll（），3。当我删除JS以获取要加载的内容时，不会出现任何表单输入框，4。在Atom编辑器中获取每个函数语句所需的打字稿错误＆＃39; ; ＆＃39;在{

之前

很抱歉这么多代码，但我希望这个问题很简单从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。输出＆＃34;这个＆＃34;构造函数（）中的语句，3.将函数语句更改为对象表示法，但保留逻辑，4.changed $ log到console.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

在各种输入类型https://justindujardin.github.io/ng2-material/#/components/input的ng2-materials示例页面中，我终于发现了＆lt;＆gt; symbol打开工作示例以公开代码。它与我上面的转录尝试有很大的不同。但是那个示例代码可以工作。

Angular Material md-autocomplete不适用于Angular1演示中重述的Angular2代码

1 个答案: