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。

中设置每个元素的样式

在共享ion-fab打开时，我需要有关隐藏like和comment按钮的帮助。一般来说，如何引用ion-item的{{1}}（或ion-card）中的元素并操纵每个元素而不影响其他ion-list的元素

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

谢谢！

Answer 1

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

该解决方案涉及两个TypeScript变量，ngClass和一个sass类。还有一个参考共享ion-fab。

在HTML代码中，[ngClass]="{'hide' : hide && index==i}添加在like和comment标记中。并且#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类：

.hide {
  visibility: hidden;
}

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

hide：布尔值; index：Number;

shareFabClicked（p，i，shareFab：FabContainer）{ console.log（＆＃39; share fab clicked＆＃39;）;

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为true，则隐藏同一行的like和comment;否则这两个按钮是可见的。

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

因此，通过这种方式，您无需向照片对象添加数据。更重要的是，你的旗帜阵列不会变得太大，因为你只存储了必须隐藏的按钮的标志。

离子2：当点击同一个离子项中的其他元素时，隐藏离子列表的离子项（或离子卡）中的元素

2 个答案: