如何作用于離子滑梯上的單個專案？-有解無憂

我在 ion-slide 中有一個卡片串列，每張卡片都有一個箭頭圖示，用于壓縮卡片中的 div 以隱藏詳細資訊，箭頭在壓縮時翻轉，單擊它會展開它。

為此，我通過 scaleY() CSS 函式進行箭頭翻轉，并展開 div

home.page.html & home.page.scss

#flip { transform: scaleY(-1); }

<ion-slides>
         <ion-card>
            <ion-img  src="pathicon" *ngIf="travdetails"(click)="travdetails =!travdetails"></ion-img> (normal arrow)
            <ion-img id='flip' src="pathicon" *ngIf="!travdetails"
                (click)="travdetails = !travdetails"> (flipped arrow)
             <ion-text> Some Text </ion-text> 
             <div *ngIf="travdetails"> (div that expanded and compressed)
             <ion-text> Some Text> </ion-text>
             </div>
       </ion-card>
    </ion-slides>

主頁.ts

 travdetails = true;

它作業正常，但一次擴展了所有卡中的所有 div，如何僅擴展選定的卡？

uj5u.com熱心網友回復：

由于您的情況不具體，因此擴展了所有卡。

如果 travdetails 發生變化，它將影響所有卡。

對于添加的每張卡，您應該有一個特定的 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>

uj5u.com熱心網友回復：

您可以將該邏輯封裝在其自己的組件中，這樣每個組件都是一個獨立的物件，不會相互干擾。

您可以在該新組件中使用角度內容投影，以使其更易于使用，而不是通過輸入將所有內容傳遞給它。

https://angular.io/guide/content-projection

如果您在 ngFor 回圈中創建幻燈片，您可以使用索引來識別物件并僅對特定物件進行操作

*ngFor="let item of items; let i=index"

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/504170.html

標籤：有角度的离子框架

上一篇：角度資料系結結果為NaN

下一篇：AWS使用IonicAuthConnect放大設定currentSession和currentAuthenticatedUser