Question

How to add read more for the td content, please help

    <ng-container *ngFor="let list of newList.all;let i = index">
        <tr [class.my-class]="i == selectedRow || currentPlayingId == list.id">
            <td>
                {{list.id }}
            </td>
            <td *ngIf="truncating">
                {{list.filename || list.url || list.eventurl  | truncate : 20}}
            </td>
<button ion-button (click)="truncating = false">show more</button>
 <button ion-button (click)="truncating = true">show less</button>
            <td class="textSize">
                {{list.mode }}
            </td>
        </tr>
    </ng-container>

我尝试过这种方法，但它不会在循环中工作，所有元素都显示更多＆＃39;将点击一个元素。请帮忙

Answer 1

根据变量

在tr上设置隐藏属性

<tr [hidden]="!showMore && i > 10" ...

使用按钮

更改该变量

<button (click)="showMore=!showMore>More/less</button>

修改

如果你想在td上做，你可以在你的组件中声明一个布尔数组

public truncateState: boolean[] = new Array(yourSizeHere); //fill it with default value truncateState.fill(false);//or true

并在您的模板中使用

truncateState [i]而不是截断

Answer 2

您只使用一个变量，因此它会将所有内容切换为显示更多或显示更少。你需要的是一个独特的布尔值来切换。所以我要做的是向对象插入一个新属性，例如showMore

因此，您可以将该属性添加到每个对象中，您还可以在模板中动态添加此属性。我可能为了一致性，最初将属性添加到所有对象，但这取决于您。然后你只需切换那个布尔值：

<ng-container *ngFor="let list of newList.all;let i = index">

  <!-- More code here -->

  <button ion-button (click)="list.showMore = true">show more</button>
  <button ion-button (click)="list.showMore = false">show less</button>

  <div *ngIf="list.showMore">
    <!-- show here -->
  </div>
</ng-container>

当数据超过ngFor angular 4中的某个字符长度时，切换读取更多并读取更少

2 个答案: