Angular2で `ngFor`のクリックされた要素のみのドロップダウンを表示する方法は？

Question

私はngForを使用してテーブルに表示されるアイテムのリストを持っていますが、これらのアイテムには対応するドロップダウンボックスがあり、アイテムをクリックすると表示されます。問題は、クリックされたドロップダウンボックスを表示し、以前に開いた残りのアイテムのドロップダウンボックスを非表示にすることだけです。現在、複数のアイテムのアイテムのドロップダウンボックスを開くことができます。ただし、クリックしたアイテムのドロップダウンを表示したいだけです。たとえば：

はしかし私が欲しいのは、私が別のアイテムをクリックしたとき、私はすべてのドロップダウンを非表示にのみ電流が1をクリックし表示したいということです。

これはangular2で可能ですか？

私は/非表示を表示するために使用され、クリックイベントを探し、それらを切り替えますディレクティブを、持っていますが、私は私の現在の問題を解決する方法がわからない。ここで

は私のコードです：

ここで

// assume necessary imports {..}... 
 
@Directive({ 
 
    selector: '[rbDropdown]' 
 
}) 
 
export class NgDropdownDirective { 
 
    constructor(private _ref: ElementRef) {} 
 

 
    @HostBinding('class.open') get opened() { 
 
    return this.isOpen; 
 
    } 
 

 
    @HostListener('click', ['$event', '$event.target']) open() { 
 
    console.log(this._ref.nativeElement); 
 
    //this._ref.nativeElement.children[1].classList.add('table-dropdown-open'); 
 
    if (this._ref.nativeElement.children[1].classList.contains('table-dropdown-open')) { 
 
     this._ref.nativeElement.children[1].classList.remove('table-dropdown-open'); 
 
     this.isOpen = false; 
 
    } else { 
 
     this.isOpen = true; 
 
     this._ref.nativeElement.children[1].classList.add('table-dropdown-open'); 
 
    } 
 
    } 
 
    private isOpen = false; 
 
}

私が持っているアイテムのための私のngForです：

<tbody> 
 
    <tr *ngFor="let module of modules"> 
 
    <td class="text-center"> 
 
     <md-checkbox></md-checkbox> 
 
    </td> 
 
    <td> 
 
     <div><span class="title-Code">{{module.Code}}</span></div> 
 
     <div class="small text-muted"><span>{{module.Name}}</span></div> 
 
    </td> 
 
    <td>{{ module.Credit}}</td> 
 
    <td>{{ module.Structure }}</td> 
 
    <td>{{ module.Tags }}</td> 
 
    <td>{{ module.LastEdit }}</td> 
 
    <td rbDropdown> 
 
     <a class="test" #thisTag></a> 
 
     <ul class="dropdown-menu table-dropdown" role="menu"> 
 
     <li> 
 
      <a (click)="_showDialogue =! _showDialogue; _getModuleCode(module)"><img src="../../assets/img/pencil.svg" alt="" width="13px">Edit Module</a> 
 
     </li> 
 
     <li> 
 
      <a (click)="removeModule(module.Code)"><img src="../../assets/img/delete.svg" alt="" width="13px">Remove Module</a> 
 
     </li> 
 
     </ul> 
 
    </td> 
 
    </tr> 
 
</tbody>

イムは、申し訳ありませんが、私は私の問題を表示するplunkerを使用する方法がわかりません。

この素晴らしいコミュニティで非常に高く評価されます。簡単にするため

Answer 1

Iは

<div *ngFor="let item of data"> 
    {{id}} &nbsp; &nbsp; &nbsp; &nbsp; 
    <button (click)="showItems($event)"> {{item.class}} </button> 
    <students style="visibility:hidden" [studentsList]="item.studentsList"> </students> 
</div> 

学生成分は以下のようになります以下のテンプレートを使用

<div *ngFor="let item of studentsList"> 
      {{item.id}} &nbsp; &nbsp; &nbsp; &nbsp; 
       <button> {{item.name}} </button> 
</div> 

方法

showItems(val){ 

    val.srcElement.nextElementSibling.style['visibility']="visible"; 

} 

場合、を対応する要素をトグルするこの方法階層はそのように従います 。

LIVE DEMO