javascript - 在 *ngFor 中为开放模式生成唯一的变量名称

Question

我想在 *ngFor 中生成唯一的变量 share，这样我就可以打开单个模态。

<li *ngFor="let gallery of galleries; let i = index">
  <div class="gallery card" >                        
        <div class="share-fab" (click)="share = !share" [class.open]="share">
           <div class="option email" [class.open]="share"><i class="material-icons">email</i></div>
           <div class="option download" [class.open]="share"><i class="material-icons">file_download</i></div>
           <div class="option facebook" [class.open]="share"><i class="material-icons">whatshot</i></div>
           <div class="option twitter" [class.open]="share"><i class="material-icons">notifications_none</i></div>
           <div class="close" [class.open]="share"><i class="material-icons cross">close</i></div>
        </div>
     </div>
   </div>
</li>

非常感谢任何帮助...

Answer 1

您应该向您的图库对象添加一个属性share，例如:

export class Gallery {
   //...
   public share: boolean = false;
}

在您的模板中，您可以执行以下操作:

<li *ngFor="let gallery of galleries; let i = index">
  <div class="gallery card" >                        
        <div class="share-fab" (click)="gallery.share = !gallery.share" [class.open]="gallery.share">
           <div class="option email" [class.open]="gallery.share"><i class="material-icons">email</i></div>
           <div class="option download" [class.open]="gallery.share"><i class="material-icons">file_download</i></div>
           <div class="option facebook" [class.open]="gallery.share"><i class="material-icons">whatshot</i></div>
           <div class="option twitter" [class.open]="gallery.share"><i class="material-icons">notifications_none</i></div>
           <div class="close" [class.open]="gallery.share"><i class="material-icons cross">close</i></div>
        </div>
     </div>
   </div>
</li>

另一个选择是在组件中创建一个变量，您可以在其中跟踪哪些画廊应该处于事件状态。很确定您会自己弄清楚如何做到这一点:)