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

item [displaymember]应该有效。你是说这不起作用吗？

Answer 3

您必须将属性定义为字符串。

检查下面的示例代码。

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

希望有帮助！

如何在angular2中动态绑定

3 个答案: