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

【问题标题】：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>

【问题讨论】：

标签： angular typescript button angular-material

【解决方案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)}}
而且这段代码只在显示更多时有效，在显示更少时什么也不做
已更新，并没有真正发现您正在检查 i。假设.show 是每一行上的一个参数，您可以切换然后检查。