* ngForで開いたモーダルの一意の変数名を生成

Question

に一意の変数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> 

別のオプションは、コンポーネントに変数を作成することです。どのギャラリーをアクティブにするかを追跡します。あなた自身でそれをどうやって行うのか分かります:)