Angular 2 - 点击更改图标

Question

我在angular2应用程序中有一个实现可折叠列表.我想要做的是,当有人点击它时,更改列表项的图标.到目前为止,我将一个click事件附加到列表中.当我将其打印到控制台时,我看到了元素参考.所以我能够查看子节点并找到附加了活动类的li元素.我的想法是,一旦找到活动元素,我就可以将子节点的图标更改为新图标.这样我就不会改变所有的图标.但是,当我尝试将图标设置为新图标时,我明白了TypeError: 0 is read-only.有没有人知道如何通过角度2做到这一点？

Plunker
https://plnkr.co/edit/jQWf7uIRZIwr4fhyFT03?p=preview

名单

  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

期望的行为:基本上我正在尝试使用materlize可折叠列表制作下拉树.因此,您单击某个项目,将其图标从加号更改为减号,以模拟您正在扩展和收缩该项目.

图片示例链接

Answer 1

Angular only解决方案(不需要jQuery)

您可以使用在单击时更改的变量在两个图标之间切换:

<div class="collapsible-header" (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst">filter_drama</i><i class="material-icons" *ngIf="!showFirst">place</i>First Section</div>

如果您只想隐藏图标,只需使用一个图标即可:

<div class="collapsible-header" (click)="showSecond=!showSecond"><i class="material-icons" *ngIf="!showSecond">place</i>Second Section</div>

我分叉你的plunker并在这里编辑了变化

PS:在你的plunker上你正在从一个httpurl 加载材料图标,使chrome拒绝加载资源.更改网址https,它将工作.

编辑

@Judson Terrell - 对我而言,Angular唯一解决方案看起来更干净

只有角度

<div class="collapsible-header" (click)="!show=show"><i class="material-icons" *ngIf="show">filter_drama</i>First</div>

Angular + jQuery

HTML

<div class="collapsible-header" id="clickedId"><i class="material-icons" id="someId">filter_drama</i>First</div>

JS

$( "#clickedId" ).click(function() {
  $("#someId").toggleClass('someIconClass');
});

+ jQuery lib - 以及它引发的可能的性能问题

Edit2 - 清除问题后

您想要的只能使用CSS实现:

HTML:

<div class="collapsible-header"><i class="material-icons more">expand_more</i><i class="material-icons less">expand_less</i>First Section</div>

CSS:

.collapsible-header.active i.more{
display:none;
}

.collapsible-header.active i.less{
display:block;
}

.collapsible-header i.less{
display:none;
}

这里更新了plunker

相信这个答案的想法

Answer 2

我建议根据您想要someIcon在标签上添加或删除类的图标来切换类更改i。

在 jQuery 中是

$(el).toggleClass('someIconClass')

我个人在 Angular 4 中的 etc 方面运气不佳elementRef，因此不得不将 jQuery 放入我的应用程序中。只是一个建议（不是最佳实践，我相信有人会争论）