angular - 在 Angular 2 中访问单击元素的数据源以进行自定义选择

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');
}

我不想做“this.typeDropdown.label”，而是想访问实际的数据源，使它是动态的。因此，例如，如果我有另一个由不同数组填充的下拉列表，则可以将相同的单击功能应用于该下拉列表，因此基本上类似于：-

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;
}