Question

在我的HTML中，我有这个：

 <div class="col-md-3 col-sm-2 col-2 collapsedData" >
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
            aria-controls="collapseTwo">
            <img src="downArrow.svg">
          </a>
        </div>
      </div>
      <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <p> Some text that displays</p>
      </div>

单击downIcon时，将删除折叠的类，并且aria-expanded将变为true。

有没有办法使用这两个更改的值，所以在Img标签上我有类似的东西;

 *ngIf aria-expanded=true, then display this image.
 else display another image.

我需要在向上箭头和向下箭头之间切换。我可以将这些属性绑定到ngIf吗？

Answer 1

您可以在组件类中创建一个属性，该组件在折叠时为true，在打开时为false。

export class MyComponent {
  collapsed: boolean = false;
  // ...etc
}

然后，绑定到模板中的click事件，以便将collapsed从false更改为true，反之亦然。并使用三元运算符更改src

img属性中的图像路径

 <a class="collapsed"
   data-toggle="collapse" 
   data-parent="#accordion" 
   href="#collapseTwo" 
   aria-expanded="false"
   aria-controls="collapseTwo"
   (click)="collapsed = !collapsed">
   <img [src]="collapsed ? 'downArrow.svg' : 'upArrow.svg'">
 </a>

当手风琴被打开时改变图像src，Angular

1 个答案: