Доступ к источнику данных выбранного элемента для пользовательского выбора в Angular 2

Question

Я пытаюсь создать пользовательский выбор в Angular 2 из HTML. Идея состоит в том, что когда пользователь щелкает элемент в параметрах, основной ярлык раскрывающегося списка обновляется, чтобы отразить, какой из них выбран. Пока у меня есть следующий код:-

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