Question

我需要你的帮助

我有这样的结构如下：

    <ng-container matColumnDef="messageText">
      <mat-header-cell *matHeaderCellDef>{{ 'CUSTOMER.MESSAGES_LIST_TABLE.MESSAGE' | translate }}</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText.substr(0, 30)}}</span>

        <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == false">{{row.messageText.substr(0, 25)}}
          <span class="show-more" (click)="expanded = true">more</span>
        </span>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == true">{{this.row.messageText}}
            <span class="show-more" (click)="this.expanded = false">less</span>
        </span>

        <span *ngIf="!row.messageText">-----</span>
      </mat-cell>
    </ng-container>

这可用作表格单元格中包含一些文本的表格。单击 more 后，表格单元格中的文本将展开以显示整个内容。如果我点击 less ，那么文字会回到它的短尺寸。

问题是，当我单击单元格中的 more 时，表格中的每个单元格都会展开以显示全文。我只想扩展特定的表格单元格（我单击 more 按钮的那个单元格）。

我将非常感谢您的想法和解决方案。：）

Answer 1

尝试这样：it wil be working for me to set true or false specific row

<span *ngIf="(row.messageText && row.messageText.length >= 30 && (row.expanded == false || !row.expanded))">{{row.messageText.substr(0, 25)}}
    <span class="show-more" (click)="row.expanded = true">more</span>
</span>
<span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == true">{{this.row.messageText}}
    <span class="show-more" (click)="row.expanded = false">less</span>
</span>

Answer 2

问题是您正在为所有行使用扩展变量。每行需要单独的变量。也许您可以将扩展属性添加到每个行对象，将其初始化为false，然后更改它。

      <mat-cell *matCellDef="let row">
        <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText}}</span>

        <span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == false">{{row.messageText.substr(0, 25)}}
          <span class="show-more" (click)="row.expanded = true">more</span>
        </span>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && row.expanded == true">{{this.row.messageText}}
            <span class="show-more" (click)="row.expanded = false">less</span>
        </span>

        <span *ngIf="!row.messageText">-----</span>
      </mat-cell>

如何仅更改Angular 4中的特定表行？

2 个答案: