如何使用角度获取列数据作为工具提示

Question

有表格，如果我在列上移动鼠标需要获取列数据作为工具提示，请尝试以下代码并获取工具提示。但是，如果我们将鼠标悬停在下拉列表中，所有选项都会出现在工具提示中。能否请您帮助我如何在工具提示中仅获取选定的选项。

  ngOnInit(): void {
    $(document).on("mousemove", "tr td", function () {
      var colVal = $(this).text();
      $(this).prop("title", colVal);
    }); 
  }

Demo

Answer 1

不要使用jquery（angular中不推荐jquery），直接在html本身绑定title

<tr *ngFor="let person of persons;let i = index;">
   <td>
      <input [(ngModel)]="person.check" [checked]="isChecked" type="checkbox" class="checkboxCls" name="id" >
   </td>
   <td title="{{person.id}}">{{ person.id }}</td>
   <!-- Bind selected option here -->
   <td title="{{person.test}}">
      <select [disabled]="!person.check?true:null" [(ngModel)]="person.test" title="{{person.test}}" (change)="selected(person.test)">
      <option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
      </select>
   </td>
   <td title="{{person.test}}">{{ person.test }}</td>
   <td title="person.firstName">{{ person.firstName }}</td>
   <td title="{{person.lastName}}">{{ person.lastName }}</td>
</tr>