Question

我正在使用bootstrap以角度2显示项目列表。

<div class="dialog">
        <header>
            <div class="title"><b>Select a Program</b></div>
            <div class="exit-button" (click)="onClickedExit()"><b>x</b>
</div>
        </header>

        <div class="bs-example">
            <div class="list-group" (click)="onClickedItem()">
                <button type="button" class="list-group-item list-group-
        item-action" active>Pictures</button>
                <button type="button" class="list-group-item list-group-
        item-action">Documents</button>
                <button type="button" class="list-group-item list-group-
        item-action">Music</button>
                <button type="button" class="list-group-item list-group-
        item-action">Videos</button>
            </div>
        </div>

    </div>

现在，当用户从上面的列表中选择任何一个项目时，我想要所选的项目值。这是我的组件类中的代码。

      onClickedItem() {
         var items = document.getElementsByClassName("list-group-item 
     active");
    if(items != undefined && items.length === 1) {
         console.log("selected item is:", items[0]);
    }

    }

我未定义为选定值。请提出解决方案。

Answer 1

您可以使用Angular的模板参考：看看这个：documantion

    <div class="bs-example">
        <div class="list-group" (click)="onClickedItem(pic)">
            <button type="button" class="list-group-item list-group-
    item-action" active #pic>Pictures</button>
    </div>




  onClickedItem(ref: any) {
     let items = ref.value;

     if(items != undefined && items.length === 1) {
          console.log("selected item is:", items[0]);
     }
  }

如何从角度2中的列表组中获取所选项目

1 个答案: