Question

我想在share中生成唯一变量*ngFor，因此我可以打开单一模态。

<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中的开放模态生成唯一变量名称

1 个答案: