Angular 2 - 单击更改图标

Question

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

笨蛋

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 可折叠列表制作一个下拉树。因此，您单击一个项目，它会将其图标从加号更改为减号，以模拟您正在扩展和收缩该项目。

图片示例链接

原文由 AJ_ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只有 Angular 的解决方案（不需要 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 上，你正在从 http url 加载材料图标，使 chrome 拒绝加载资源。将 url 更改为 https 它将起作用。

编辑

@Judson Terrell - 对我来说，只有 Angular 的解决方案看起来更干净

仅限角度

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

角度 + jQuery

网页格式

<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 库- 以及它可能引发的性能问题

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

归功于 这个答案 的想法

原文由 BogdanC 发布，翻译遵循 CC BY-SA 3.0 许可协议