我在ion-slide中有一个卡片列表，每张卡片都有一个箭头图标，它压缩卡片中的一个div以隐藏细节，箭头在压缩时会翻转，单击它会展开它。要做到这一点，我必须通过scaleY（）CSS函数执行箭头翻转，并展开div
主页.html&主页.scss
第一个
主页.页面.ts
travdetails = true;
它工作正常，但扩展了所有卡中的所有div一次，如何只扩展选定的卡？
7rtdyuoh1#
因为你的情况不具体，所以所有的卡都被免除了。如果travel details发生变化，将影响所有卡。你应该有一个特定的travdetails如travdetails1，travdetails2为您添加的每张卡。或者，如果您基于列表创建组件，则可以添加类似isExpended的属性。
<ion-card *ngFor="let travdetails of travdetailsList"> <ion-img src="pathicon" *ngIf="travdetails.isExpanded"(click)="travdetails.isExpanded =!travdetails.isExpanded"></ion-img> (normal arrow) <ion-img id='flip' src="pathicon" *ngIf="!travdetails.isExpanded" (click)="travdetails.isExpanded= !travdetails.isExpanded"> (flipped arrow) <ion-text> Some Text </ion-text> <div *ngIf="travdetails.isExpanded"> (div that expanded and compressed) <ion-text> Some Text> </ion-text> </div> </ion-card>
1tuwyuhd2#
您可以将该逻辑封装在其自己的组件中，这样每个组件都是一个独立的对象，不会相互干扰。然后，您可以在新组件中使用Angular 内容投影，以使其更易于使用，而不是通过输入将所有内容传递给它。https://angular.io/guide/content-projection如果在ngFor循环中创建幻灯片，则可以使用索引来标识对象并仅对特定对象执行操作
*ngFor="let item of items; let i=index"
2条答案
按热度按时间7rtdyuoh1#
因为你的情况不具体，所以所有的卡都被免除了。
如果travel details发生变化，将影响所有卡。
你应该有一个特定的travdetails如travdetails1，travdetails2为您添加的每张卡。
或者，如果您基于列表创建组件，则可以添加类似isExpended的属性。
1tuwyuhd2#
您可以将该逻辑封装在其自己的组件中，这样每个组件都是一个独立的对象，不会相互干扰。
然后，您可以在新组件中使用Angular 内容投影，以使其更易于使用，而不是通过输入将所有内容传递给它。
https://angular.io/guide/content-projection
如果在ngFor循环中创建幻灯片，则可以使用索引来标识对象并仅对特定对象执行操作