离子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中有每个元素的风格。

当共享ion-fab打开时，我需要帮助隐藏类似按钮和注释按钮。在一般情况下，你怎么参考元素在ion-list的ion-item（或ion-card）和操纵每个元素，不影响其他ion-item小号元素

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

谢谢！

Answer 1

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

该解决方案涉及两个TypeScript变量ngClass和一个sass类。另外还有一个关于分享离子晶圆厂的参考。

在HTML代码中，[ngClass]="{'hide' : hide && index==i}被添加到like和comment标签中。并且在离子晶圆标签中添加了#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; 
} 

最后，在打字稿代码，在共享方法中，隐藏和索引变量设置为隐藏/显示根据共享fab按钮的状态，类似按钮和注释按钮：

hide：Boolean; index：Number;

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 

}

所以基本上，如果指数等于选定行的索引和隐藏是真实的，类似和相同的行的评论将被隐藏;否则这两个按钮是可见的。

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

所以通过使用这种方式，您不必将数据添加到照片对象。更重要的是，你的标志阵列不会太大，因为你只能存储必须隐藏的按钮标志。