Ionic 2：当单击同一 ion-item 中的其他元素时，隐藏 ion-list 的 ion-item（或 ion-card）中的元素

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-items 的元素的情况下操作每个元素

注意：我可以做的一件事（但选择不做）是在照片对象中设置标志来隐藏和显示每个按钮。我不想采用这种方法的原因是照片对象可能非常大，我不想向它添加更多数据。

谢谢！

Answer 1

根据@Akash Nigam 的解决方案回答我的问题。谢谢@Akash。我更进一步，想出了下面的解决方案，避免使用数组和向照片对象添加额外的标志。

解决方案涉及两个 TypeScript 变量，ngClass 和一个 sass 类。而且还有提到share ion-fab。

在HTML代码中，[ngClass]="{'hide' : hide && index==i}被添加到like和comment标签中。并且在 ion-fab 标签中添加了#shareFab。

<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;
}

最后，在 TypeScript 代码中，在 share 方法中，将 hide 和 index 变量设置为根据 share fab 按钮的状态隐藏/显示 like 和 comment 按钮：

隐藏：布尔值； 索引：数字；

shareFabClicked(p, i, shareFab: FabContainer) { console.log('share fab clicked');

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

// TODO: share functionality

}

所以基本上，如果 index 等于所选行的索引并且 hide 为真，则同一行的点赞和评论将被隐藏；否则这两个按钮是可见的。

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;
    }
}

因此，通过这种方式，您不必向照片对象添加数据。更重要的是，您的标志数组永远不会变得太大，因为您只存储必须隐藏的按钮的标志。