Angular，在 Angular material table 中使用 'See More' 按钮切换文本

Question

我已经实现了切换描述的功能，当用户点击'See More'时它会显示完整的描述。 但问题是，它会同时切换所有这些。

这是我在 html 文件中的内容：

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->
    
      <!-- Category Column -->
      <ng-container matColumnDef="category">
        <th mat-header-cell *matHeaderCellDef>Category</th>
        <td mat-cell *matCellDef="let element">
          {{ element.category }}
        </td>
      </ng-container>
    
      <!-- Subcategory Column -->
      <ng-container matColumnDef="subcategory">
        <th mat-header-cell *matHeaderCellDef>Subcategory</th>
        <td mat-cell *matCellDef="let element">
          {{ element.subcategory }}
        </td>
      </ng-container>
    
      <!-- Email Column -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>Email</th>
        <td mat-cell *matCellDef="let element">{{ element.email }}</td>
      </ng-container>
    
      <!-- Subject Column -->
      <ng-container matColumnDef="subject">
        <th mat-header-cell *matHeaderCellDef>Subject</th>
        <td mat-cell *matCellDef="let element">{{ element.subject }}</td>
      </ng-container>
    
      <!-- Description Column -->
      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef>Description</th>
        <td mat-cell *matCellDef="let element" id="description">
          <p *ngIf="show">{{ element.description }}</p>
          <a mat-button href="javascript:void()" (click)="toggleText()">
            {{ buttonName }}</a>
        </td>
      </ng-container>
    
      <!-- Image Column -->
      <ng-container matColumnDef="images">
        <th mat-header-cell *matHeaderCellDef>Images</th>
        <td mat-cell *matCellDef="let element">
          <img
            *ngFor="let image of element.image"
            [src]="image"
            height="150"
            width="200px"
            style="margin: 3px"
          />
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>

这是在 TypeScript 文件中切换按钮的函数：


    toggleText() {
    this.show = !this.show;
    if (!this.show) {
      this.buttonName = 'See More';
    } else {
      this.buttonName = 'Hide';
    }
  }

Answer 1

它显示所有这些，因为您有一个布尔变量 (this.show) 控制是否显示描述。您需要跟踪每个项目的各个标志。我建议改用对象来做到这一点：

public showDescription: { [key: number]: boolean } = {};

假设您的元素实际上有一个 id 属性类型 number.

单元格定义现在应该如下所示，以适应我们拥有的新地图：

<td mat-cell *matCellDef="let element" id="description">
  <p *ngIf="showDescription[element.id]">{{ element.description }}</p>
    <a mat-button href="javascript:void()" (click)="toggleText(element.id)">
      {{ showDescription[element.id] ? 'Hide' : 'See More' }}</a>
</td>

toggleText 处理程序现在需要将元素 ID 作为参数并相应地更新地图：

toggleText(elementId: number) {
  this.showDescription[elementId] = !this.showDescription[elementId];
}

Angular，在 Angular material table 中使用 'See More' 按钮切换文本

Angular, toggle text with a 'See More' button in Angular material table

html

javascript

angular-material

angular