单击按钮时显示 More/Show Less ngFor 数据

Question

我在显示和隐藏 ngFor 数据时遇到问题。我想默认显示一条记录，当有人点击查看更多按钮时，将显示剩余记录。我不想自动关闭上一条记录。目前，当我打开另一个行程时，之前的行程内容将自动关闭。任何人，请帮助我？这是组件文件。

<div class="itineraryDay" *ngFor="let eventList of eventDailyItineraray; let i = index">
<div class="itineraryDay-header">
    <h5>Day {{i+1}}</h5>
    <p>{{eventList.tourevents[0]?.categoryName}}</p>
</div>
<div class="itineraryDay-detail">
    <div class="itinerary-cards">
        <mat-card class="mycard" *ngFor="let event of eventList.tourevents | slice:0:[selectedIndex === i ? max  : 1 ]; let j = index">
            <div class="day-activity d-flex">
                <div class="activity-img">
                    <img [src]="(event?.eventPic ? firstEventImage(event?.itemId,event?.eventPic):'./assets/media/icons/preview-item.svg')" />
                </div>
                <div class="activity-detail">
                    <div class="activity-detail-inner d-flex justify-content-between align-items-center">
                        <div class="activity-category d-flex">
                            <img src="{{categoryPic}}{{event?.categoryIcon}}" />
                            <span>{{event?.itemName}}</span>
                        </div>
                        <div class="activity-hours d-flex align-items-center justify-content-end">
                            <img src="./assets/media/icons/access_time-24px.svg" />
                            <span>{{durationCalculation(event?.duration)}} Hours</span>
                        </div>
                    </div>
                    <p>{{event?.description}}</p>
                </div>
            </div>
        </mat-card>
    </div>
    <div class="see-more">
        <div class="icon-inner">
            <p (click)="toggle(i, $event)" class="seeMore">See More</p>
            <div class="more-icon" (click)="toggle(i, $event)" [ngClass]="{'active': selectedIndex === i}" >
                <i class="flaticon-eye"></i>
            </div>
        </div>
    </div>
</div>

这里是ts文件中的点击函数

toggle(index, event){

this.max = this.eventDailyItineraray[index].tourevents.length;

if(this.selectedIndex === index){
  this.selectedIndex = -1;
  event.currentTarget.parentElement.children[0].innerText = 'See More';
}else{
  this.selectedIndex = index;
  event.currentTarget.parentElement.children[0].innerText = 'See Less';
} }

Answer 1

你可以试试把'trackby'的概念放在这里。它会跟踪之前的变化，其他变化会顺利添加

<...*ngFor="let item of items; trackBy:trackByIdentity">

在您的 .ts 文件中

trackByIdentity(index, item){
     return item.<attribute_which_is_unique>; 
  }

Answer 2

我在这种情况下所做的（这可能是一个“廉价”的解决方案，但到目前为止我想不出更好的主意）是在你的可迭代对象中的每个对象中添加一个值，表明是否项目应该有一个活动的 class 或没有。在您的情况下，当您获取 youeventList.tourevents 时，您可以对其进行映射并向其中的每个对象添加类似 (isActive = false) 的内容，然后将该值绑定到 ngFor 中每个项目的 class循环。

因此，当您单击切换按钮时，您传递了 ngFor 项目的索引，并修改了数组中的该值 - 它应该附加或删除相应项目的活动 class 名称，并且不会对 ngFor 循环中的其余项目做任何事情。我希望它很清楚，如果需要，我可以用示例代码更新我的答案。

Answer 3

你想要管理一个项目列表，所以你需要一个数组——而不是单个变量。于是定义了一个数组

more:boolean[]=[]

此外，要更改 html 中的文本，不要使用像 event.currentTarget.parentElement.children[0].innerText = 'See More' 那样“奇怪”的东西，更好的是“angular 方式”

<p (click)="more[i]==!more[i]" class="seeMore">
    {{more[i]?'See Less':'See more'}}
</p>

并替换你的

`selectedIndex === i` by `more[i]`

单击按钮时显示 More/Show Less ngFor 数据

Show More/Show Less ngFor data on button click

typescript

angular

angular8