在 table 单元格 angular 中显示 more/less 按钮

Question

我有垫子 table 并且我制作了一个按钮，如果长度 > 某个数字
，来自 table 单元格的 hide/unhide 文本但它不正确，这个按钮打开每个单元格中的所有文本，按钮只在第一个单元格中工作

 <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>

Answer 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>

在 table 单元格 angular 中显示 more/less 按钮

show more/less button in table cell angular

button

typescript

angular-material

angular