獲取Angular中的選定名稱標簽

Question

我有以下顯示各種葯丸的html代碼，我想在Angular中檢索所選葯丸的名稱：

<ul class="nav nav-pills mb-5 justify-content-center" id="pills-tab" role="tablist">
  <li class="nav-item">
     <a class="nav-link active" data-toggle="pill" role="tab" aria-selected="true">test 1</a>
  </li>
  <li class="nav-item">
     <a class="nav-link" data-toggle="pill" role="tab" aria-selected="false">test 2</a>
  </li>
  <li class="nav-item">
     <a class="nav-link" data-toggle="pill" role="tab" aria-selected="false">test 3</a>
  </li>
  <li class="nav-item">
     <a class="nav-link" data-toggle="pill" role="tab" aria-selected="false">test 4</a>
  </li>
</ul>

有沒有辦法找回它？

Answer 1

您可以針對這些情況使用ngFor，

  <ul *ngFor="let data of arrayOfData">
<li>
  <a>
      <a class="nav-link active" data-toggle="pill" role="tab" aria-selected="false" (click)="liClicked(data)" >{{data}}</a>
  </a>
</li>

如您所見，arrayOfData是（test1'test2'test3，依此類推..）

設置為ts文件中的屬性：

  arrayOfData = ['test1', 'test2','test3', 'test4']

函數“ liClicked”獲取被單擊的arrayOfData中的值。 （該函數位於ts文件中，以：）

      arrayOfData = ['test1', 'test2','test3', 'test4']

      liClicked(selectedTest) {
        // Do your work here...
      }

祝好運 ！