在表格单元格角度显示更多/更少按钮

Posted 2023-03-13

【中文标题】在表格单元格角度显示更多/更少按钮

【英文标题】：show more/less button in table cell angular

【发布时间】：2022-01-22 04:54:42

【问题描述】：

我有垫子表，我制作了一个按钮，如果长度 > 某个数字，则隐藏/取消隐藏表格单元格中的文本 但它工作不正确，此按钮打开每个单元格中的所有文本，按钮仅在第一个单元格中有效

 <ng-container matColumnDef="Test">
            <th mat-header-cell *matHeaderCellDef mat-sort-header >Test</th>
            <td mat-cell *matCellDef="let row; let i = index;"> 
              
              <ng-container>
                 show ? (row.Test | slice:0:100) : row.Test 
                
      <button mat-raised-button class="show-less-button" color = 'primary' type="button" *ngIf="row.Test.length > 5;" (click)="( show == i ? show : show = i )">  ((show == i)) ? 'Show less' : 'Show more' 
                </button>
              </ng-container>
              </td>
          </ng-container>

【参考方案1】：

您必须每行隔离它，因为“显示”将针对整个组件，然后只有一个。像这样的：

 <ng-container matColumnDef="Test">
    <th mat-header-cell *matHeaderCellDef mat-sort-header >Test</th>
    <td mat-cell *matCellDef="let row; let i = index;"> 
      
      <ng-container>
         row.show ? (row.Test | slice:0:100) : row.Test 
        
        <button 
            mat-raised-button 
            class="show-less-button" 
            color='primary' 
            type="button" *ngIf="row.Test.length > 5;" 
            (click)="row.show = !row.show">
             ((row.show)) ? 'Show less' : 'Show more' 
        </button>
      </ng-container>
      </td>
  </ng-container>

【讨论】：

我刚刚做了这样的 row.show ? row.Test: (row.Test| slice:0:100) 5;" (click)="( row.show == i ? row.show = i : row.show = -1 )"> ((row.show == i)) ? '显示更少' : '显示更多'

而且这段代码只在显示更多时有效，在显示更少时什么也不做

已更新，并没有真正发现您正在检查 i。假设.show 是每一行上的一个参数，您可以切换然后检查。