ターゲットの兄弟要素を角2で表します

Question

テンプレートに複数のボタンタグがあり、クリック時にスタイルの変更を適用するには、ul兄弟をターゲットにする必要があります。コンポーネント内のshowMore（）のulをどのようにターゲットに設定できますか？

 <button (click)="showMore()" class="show-more-btn"></button> 
     <ul class="list-content"> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 
     <button (click)="showMore()" class="show-more-btn"></button> 
     <ul class="list-content"> 
      <li>List Item</li> 
      <li>List Item</li> 
     </ul> 

Answer 1

この

uls = { 
ul1: false, 
ul2: false 
}; 

のようなオブジェクトを作成し、あなたはそれがこの

のようにも

(click)="uls['ul1'] = !uls['ul1']" 

を切り替えることができ、この

<button (click)="uls['ul1'] = true" class="show-more-btn"></button> 
<ul class="list-content" *ngIf="uls['ul1']"> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 
<button (click)="uls['ul2'] = true" class="show-more-btn"></button> 
    <ul class="list-content" *ngIf="uls['ul2']"> 
    <li>List Item</li> 
    <li>List Item</li> 
    </ul> 

のようにクリックで、ULを表示することができますそれはあなたが関数またはこのようなテンプレートの中で直接的には、ロジックが単純な場合はこれを好むでしょう。あなたは、テンプレートの参照変数を使用することができます

Answer 2

：

<button #butt1 (click)="butt1.showMore = !butt1.showMore;" class="show-more-btn">Show more</button> 
<ul class="list-content" *ngIf="butt1.showMore"> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

<button #butt2 (click)="butt2.showMore = !butt2.showMore;" class="show-more-btn">Show more</button> 
<ul class="list-content" *ngIf="butt2.showMore"> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul>