在 *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>

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

在 *ngFor 中为打开模态生成唯一变量名称

Generate unique variable name for open modal in *ngFor

javascript

ngfor

angular