离子2:当单击同一离子属性中的其他元素时，将离子列表的离子项目(或离子卡)中隐藏一个元素

Question

我在照片对象中有一个照片对象列表。这些照片显示在ion-list中。对于每个项目，我都有类似的评论和共享按钮。

我使用ion-fab构建了共享按钮，因此我可以在单击ion-card中的共享按钮时打开两个共享按钮(在Facebook，Twitter上共享(。

我想做的是隐藏诸如和评论按钮时，共享ion-fab打开。

<ion-list>
    <ion-card *ngFor="let photo of photos | async; let i = index;">
        <img [src]="photo.img"/>
        <span>{{photo.caption}}</span>
        <button ion-button>like</button>
        <button ion-button>comment</button>
        <ion-fab right>
            <button ion-fab (click)="shareFabClicked(photo, i)">
                <ion-icon name="share-alt"></ion-icon>
            </button>
            <ion-fab-list side="left">
                <button ion-fab (click)="share(photo, 'facebook')">
                    <ion-icon name="logo-facebook"></ion-icon>
                </button>
                <button ion-fab (click)="share(photo, 'twitter')">
                    <ion-icon name="logo-twitter"></ion-icon>
                </button>
            </ion-fab-list>
        </ion-fab>
    </ion-card>
</ion-list>

假设ion-card中的每个元素都有sass。

当共享ion-fab打开时，我需要隐藏喜欢和注释按钮的帮助。通常，您如何参考ion-list的ion-item(或ion-card(中的元素并操纵每个元素而不影响其他ion-item S

的元素

注意：我可以做的一件事(但选择不这样做(是照片对象中有标志来隐藏和显示每个按钮。我不想使用这种方法的原因是，照片对象可能很大，我不想在其中添加更多数据。

谢谢！

Answer 1

根据@akash Nigam的解决方案回答我的问题。谢谢@akash。我走得更远，提出了下面的解决方案，并避免使用数组并在照片对象中添加额外的标志。

该解决方案涉及两个打字稿变量，NGCLASS和一个SASS类。而且还提到了share ion-fab。

在HTML代码中， [ngClass]="{'hide' : hide && index==i}添加在类似和注释标签中。和 #shareFab添加在Ion-fab标签中。

<ion-list>
    <ion-card *ngFor="let photo of photos | async; let i = index;">
        <img [src]="photo.img"/>
        <span>{{photo.caption}}</span>
        <!-- apply the 'hide' class if hide = true and index = i -->
        <button ion-button [ngClass]="{'hide' : hide && index==i}>
            like
        </button>
        <button ion-button [ngClass]="{'hide' : hide && index==i}>
            comment
        </button>
        <ion-fab right #shareFab>
            <button ion-fab (click)="shareFabClicked(photo, i, shareFab)">
                <ion-icon name="share-alt"></ion-icon>
            </button>
            <ion-fab-list side="left">
                <button ion-fab (click)="share(photo, 'facebook')">
                    <ion-icon name="logo-facebook"></ion-icon>
                </button>
                <button ion-fab (click)="share(photo, 'twitter')">
                    <ion-icon name="logo-twitter"></ion-icon>
                </button>
            </ion-fab-list>
        </ion-fab>
    </ion-card>
</ion-list>

和在SASS代码中，定义了隐藏类：

.hide {
  visibility: hidden;
}

最后，在"打字"代码中，在共享方法中，根据共享fab的状态按下了隐藏和索引变量，以隐藏/显示shide/show the类似和注释按钮：

hide：boolean;索引：数字;

sharefabclicked(p，i，sharefab：fabcontainer({ console.log('share fab ockinged'(;

if (shareFab._listsActive) {
  console.log('fab closing');
  this.hide = false;
} else {
  console.log('fab opening');
  this.hide = true;
}
this.index = i;
// TODO: share functionality

}

基本上，如果索引等于所选行的索引和隐藏的索引，则同一行的类似和评论将被隐藏；否则这两个按钮都是可见的。

Answer 2

您可以有一个隐藏按钮照片的数组，该图片仅存储仅隐藏的照片和注释按钮的照片：

public hidden: boolean[] = [];

在您的html中：

<button ion-button *ngIf="!hidden[i]">like</button>
<button ion-button *ngIf="!hidden[i]">comment</button>

在sharefabclicked((函数中：

public shareFabClicked(photo: any, i: number): void {
    if (this.hidden[i]) {
        this.hidden.splice(i, 1); // Remove the flag if the buttons are already hidden, so that they get displayed again.
    } else {
        this.hidden[i] = true;
    }
}

因此，通过这种方式，您无需将数据添加到照片对象中。更重要的是，您的标志阵列永远不会太大