如何在angular2中動態綁定

Question

我正在構建一個下拉組件，該組件允許控件的用戶配置要綁定到數據源的屬性。 這是用法示例：

<ex-dropdown name="Office" valuemember="CODE" displaymember="DESC"     [datasource]="cities"></ex-dropdown>

這是數據示例：

var data =[
{
    "ID": 0,
    "CODE": "00",       
    "DESC": "New York"
},....

數據的形狀可能不同，因此控件的用戶需要能夠設置組件的displaymember屬性，並且該組件需要綁定到用戶設置的任何內容。 換句話說，綁定需要是動態的。

在下拉組件模板中，我已對其進行硬編碼以綁定到DESC屬性：

<li *ngFor="#item of myItems">
      <a href="#">  {{item.DESC}}</a>
</li>

並且適用於上面的示例數據。 但是我需要綁定是動態的。

我想要類似item[displaymember]東西。

Answer 1

您可以利用組件輸入：

@Component({
  selector: 'dropdown',
  (...)
})
export class DropdownComponent {
  @Input()
  param:string;
}

並在使用父組件模板中的組件時提供如下參數：

<dropdown [param]="someexpression"></dropdown>

Answer 2

您必須將屬性定義為字符串。

檢查下面的示例代碼。

下拉component.ts文件：

@Component({
  selector: 'ex-dropdown',
  (...)
})
export class DropdownComponent {
  @Input() displaymember: string = 'DESC'; // Here you can provide a default value.
}

下拉組件模板文件：

<li *ngFor="#item of myItems">
      <a href="#">  {{item[displaymember]}}</a>
</li>

並用作：

<ex-dropdown name="Office" valuemember="CODE" displaymember="'DESC'"     [datasource]="cities"></ex-dropdown>

希望能幫助到你！