Angular中Show more/show less功能逻辑异常，需调整显示规则

核心问题点 #

1. 逻辑完全颠倒：当前代码中showmoreless的取值对应关系和需求相反——你设置的是showmoreless=true时显示全部，false时显示前3条，但需求是show more显示最新3条，show less显示全部。
2. 最新记录获取错误：slice(0,3)是取数组前3条旧记录，而非最新的3条，应该用slice(-3)获取数组最后3条（假设notesLog是按时间从旧到新排序的）。
3. 无记录展示的原因：当showmoreless=false时，只截取前3条，若这3条不符合ngIf的过滤条件，就会出现无记录的情况。

修正步骤 #

1. 调整组件变量逻辑

在组件类中初始化showmoreless为false（默认显示全部，对应show less状态）：

showmoreless = false; // 默认显示全部（show less状态）

添加状态切换方法：

toggleShow() {
  this.showmoreless = !this.showmoreless;
}

2. 修正模板中的slice逻辑

把原有的notesLog.slice(0,showmoreless ? undefined : 3)替换为：

notesLog.slice(showmoreless ? -3 : 0)

逻辑说明：

• 当showmoreless=true（点击show more）：slice(-3)取数组最后3条（最新记录）
• 当showmoreless=false（点击show less）：slice(0)等价于取整个数组（显示全部）

3. 完整修正后的模板代码

<ng-container *ngFor="let item1 of errorItem.controls.errortype.value">
  <ng-container *ngFor="let item of notesLog.slice(showmoreless ? -3 : 0)">                                      
    <tr
       *ngIf=" 
       item.errortypegenid === item1.ErrorTypeGenId &&
       item.errortypegenid === errorItem?.controls?.myitemsArray.value[i].errortypegenid">
         <td>{{ item?.comment }}</td>
         <td [width]="120">{{ item?.Action }}</td>
         <td [width]="120">{{ item?.updatedby ? item.updatedby : item.createdby }}</td>
         <td [width]="120">
            {{(item?.UpdateDate ? item.UpdateDate : item.CreatedDate) | date: 'MM/dd/yyyy'}}</td>
    </tr>
  </ng-container>
</ng-container>

<!-- 状态切换按钮 -->
<button (click)="toggleShow()">
  {{ showmoreless ? 'Show Less' : 'Show More' }}
</button>

额外说明 #

• 如果notesLog是按时间从新到旧排序的，那slice(0,3)就可以取最新3条，此时把slice逻辑改成notesLog.slice(0, showmoreless ? 3 : undefined)即可。
• 确保errorItem?.controls?.myitemsArray.value[i]中的i是外层循环的有效索引（需要在对应的*ngFor中添加let i = index）。

内容的提问来源于stack exchange，提问作者Noor Nisha