无法绑定 angular 中的数据 2

Unable to bind data in angular 2

我正在尝试将 countries 数据绑定到我的 px 组件中,这是一个预输入。

Codepen link here.

直接在 html 中绑定数据时,预输入提示国家列表。但是当我尝试通过从 class 传递数据时,它没有绑定。

var AppComponent = ng
  .Component({
    selector: 'my-app'
  })
  .View({
    template: `<div> 
<h3>Case 1 : Working dropdown:</h3>
<px-typeahead placeholder="Enter your search query" local-candidates='["Alabama","Alaska","American Samoa","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District Of Columbia", "South Dakota","Tennessee","Texas","Utah","Vermont","Virgin Islands","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'></px-typeahead> 
<br>
<h3>Case 2 : Not working dropdown if data is bind from controller:</h3>
    <px-typeahead placeholder="Enter your search query" local-candidates={{countries}}></px-typeahead> 
{{countries}}
    </div>`
  })
  .Class({
    constructor: function() {      
       this.countries=["United States", "Antigua and/or Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan"]
    }
  });

认为组件 px-typeahead 期望其属性 local-candidates 中的数据是具有 '' 的数组。 我尝试了不同的绑定方式 countries,比如 {{countries}}"countries" etc.But 没有用。

正确的语法(对于双向数据绑定)是 [local-candidates]="countries",它将适用于您的 CodePen