Angular，使用 Angular 材料表中的“查看更多”按鈕切換文本

Question

我已經實現了切換描述的功能，當用戶點擊“查看更多”時，它將顯示完整的描述。 但問題是，它同時切換所有這些。

這是我在 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 };

假設您的元素實際上具有類型為number的id屬性。

單元定義現在應如下所示，以適應我們擁有的新地圖：

<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];
}

Answer 2

每個行都需要一個“id”。 例如，如果您在 'dataSource' 數組中有一個屬性 id，您可以執行以下操作：

TS：

toggleText(index:number) {
    this.showId = index;   
  }

HTML：

<!-- Category Id -->
<ng-container matColumnDef="category">
   <th mat-header-cell *matHeaderCellDef>Category</th>
   <td mat-cell *matCellDef="let element">
      {{ element.id }}
   </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="showId === element.id">{{ element.description }}</p>
          <a mat-button href="javascript:void()" (click)="toggleText(element.id)">
            {{ showId === element.id ? 'Hide' : 'See More'}}</a>
        </td>
   </ng-container>