使用 Angular 2 更改 src 属性而不使用 JQUERY答案

【问题标题】：change src attribute with angular 2 WITHOUT JQUERY使用 Angular 2 更改 src 属性而不使用 JQUERY
【发布时间】：2016-08-05 15:11:15
【问题描述】：

我有这些图片：

<div class="image-index-container">
                    <div>
                        <img class='index-pics' src="images/yourbag.png" alt="">
                        <p class="activeIndex">Your Bag</p>
                    </div>
                    <hr>
                    <div style="width: 13%">
                        <img class='index-pics' src="images/delivery-gray.png" alt="">
                        <p>Delivery Details</p>
                    </div>
</div>

当我点击一个按钮时，我想将 src 属性从 images/yourbag 更改为 images/yourbag-gray，并将带有 src images/delivery-gray 的 img 更改为 images/delivery。

除了从第一个文本中删除 class activeIndex 并将其添加到第二个而不使用 JQuery

【问题讨论】：

标签： angular

【解决方案1】：

用这个[src]="imageUrl"这样做

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <img class='index-pics' [src]="imgsrc" alt="">
    </div>
    <button type="button" (click)="btnClick()">change</button>
  `,
  directives: []
})
export class App {
  imgsrc="http://az866755.vo.msecnd.net/product/1468402190267-product.jpeg"

  btnClick()
  {
   this.imgsrc="http://az866755.vo.msecnd.net/product/1454067764999-product.jpeg" 
  }

  constructor() { }
}

【讨论】：

如果我的图片有一个 imgsrc 和 srcset 像：srcset="images/ic-add-copy-3@2x.png 2x, images/ic-add-copy-3@3x.png 3倍”？同样的方法？
像这样使用[srcset]

【解决方案2】：

使用src="{{path}}"，Angular 会更新路径。例如

<button (onclick)="path=newpath"><button>

另一个例子

<div class="col-lg-4">
<h3>Github Users:{{[].concat(users).length}} </h3>
<ul>
  <li *ngFor="let user of users" style="list-style:none">
   <button (click)="data = user" style="cursor:pointer"> <img  src="{{user.avatar_url}}" style="height:200px; width:250px;" /></button>
  </li>
</ul>
</div>
<md-card class="col-lg-8 " *ngIf="data" style="position:fixed; margin-left:22%; margin-top:3.5%">
  <div class="col-lg-4">
  <img  src="{{data.avatar_url}}" style="height:200px; width:250px;" />
  </div>
  <div class="col-lg-8">
{{data | json}}
 </div>
</md-card>

【讨论】：