首页 文章

Angular 2使整行可以点击

提问于
浏览 次
0

我想让一个表的每一行都可以在Angular 2中单击 . 但是，只有包含数据的单元格部分是可点击的 . 即，如果一个单元包含的数据多于另一个单元，并且因此具有更大的高度，则较小单元的空位不可点击 .

例如，在下面的页面中，第一个单元格只能在包含名称的行上单击，而第二个单元格的整体是可单击的

<table>
    <thead></thead>
    <tbody>
        <tr *ngFor="let item of items" routerLink="/otherpage/{{item.Id}}">
           <td>{{item.name}}</td>
           <td>
              <ul>
                 <li *ngFor="let detail of item.details">
                    {{detail}}
                 </li>
              </ul>
           </td>
        </tr>
    </tbody>
</table>
html angular

2 回答

  • 0

    将 <tr> 的填充设置为0.这样 <td> 元素将填充行，从而使整个单元格可单击 .
    请注意，根据您的css文件，这可能会有点困难 . 但解决方案基本上是让您的数据覆盖您的行 .

    回复于
  • 0

    我已经修复了 routerLink 代码 .

    <table>
  <thead></thead>
  <tbody>
      <tr class="clickable" *ngFor="let item of items" [routerLink]="['/otherpage/', item.Id]">
         <td>{{item.name}}</td>
         <td>
            <ul>
               <li *ngFor="let detail of item.details">
                  {{detail}}
               </li>
            </ul>
         </td>
      </tr>
  </tbody>
</table>

    您需要为动画添加CSS .

    clickable {
  cursor: pointer;
}

    这将使整个 <tr></tr> 可以使用光标动画进行点击

    回复于

相关问题