Question

我正在尝试在由HTML构成的Angular 2中构建自定义选择。这个想法是，当用户单击选项中的项目时，下拉列表的主标签会更新以反映选择哪个项目。到目前为止，我有以下代码： -

HTML： -

<div class="dropdown">
    <div>
        <span>Type: <strong>{{typeDropdown.label}}</strong></span>
    </div>
    <div class="options">
        <div *ngFor="let item of typeDropdown.options" [attr.data-label]="item.label" [attr.data-value]="item.value" (click)="selectDropdownItem($event)">{{item.label}}</div>
    </div>
</div>

TS文件： -

typeDropdown:any = { 
    label: 'Any', 
    value: 'any', 
    options: [
        { label: 'Type 1', value: '1' },
        { label: 'Type 2', value: '2' },
        { label: 'Type 3', value: '3' }
    ]
}

selectDropdownItem(event){
    let t = event.target;
    this.typeDropdown.label = t.getAttribute('data-label');
}

而不是做＃34; this.typeDropdown.label＆＃34;我想访问实际的数据源，以便它是动态的。因此，例如，如果我有另一个由不同数组填充的下拉列表，则可以将相同的单击函数应用于此类似于： -

this.<data source of clicked element goes here>.label = t.getAttribute('data-label');

这可能吗？

Answer 1

您可以将项目传递给方法“selectDropdownItem”，并设置selectedItem

HTML： -

<div class="dropdown">
  <div>
    <span>Type: <strong>{{selectedItem.label}}</strong></span>
  </div>
  <div class="options">
    <div *ngFor="let item of typeDropdown.options (click)="selectDropdownItem(item)">{{item.label}}
  </div>
</div>

TS文件： -

typeDropdown:any = {
  options: [
    { label: 'Type 1', value: '1' },
    { label: 'Type 2', value: '2' },
    { label: 'Type 3', value: '3' }
  ]
}

selectedItem: any {
  label: '',
  value: ''
}

selectDropdownItem(item: any): void {
  this.selectedItem = item;
}

访问Angular 2

1 个答案: