javascript - Angular 2 - 单击更改图标

Question

我的 angular2 应用程序中有一个物化可折叠列表。我想要做的是，当有人点击它时更改列表项的图标。到目前为止，我在列表中附加了一个点击事件。当我将其打印到控制台时，我看到了元素引用。所以我可以查看子节点并找到附加了事件类的 li 元素。我的想法是，一旦找到事件元素，我就可以将子节点的图标更改为新图标。这样我就不会更改所有图标。但是，当我尝试将图标设置为新图标时，我得到了 TypeError: 0 is read-only。有谁知道如何通过 Angular 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 可折叠列表制作一个下拉树。因此，您单击一个项目，它会将其图标从加号更改为减号，以模拟您正在扩展和收缩该项目。

Picture Example Link

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>

我 fork 了你的 plunker 并编辑了更改 here

PS:在你的 plunker 上，你正在从 http url 加载 Material 图标，使 chrome 拒绝加载资源。将 url 更改为 https 即可。

编辑

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

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

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 here

创意归功于 this answer