在不使用JQUERY的情况下使用angular 2更改src属性

我有这样的图片：

<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

除了从第一个文本中删除类activeIndex并在不使用JQuery的情况下将其添加到第二个文本之外，使用

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>

Github用户：{{[].concat（用户）.length}




{{data}json}

使用此

[src]=“imageUrl”

从'@angular/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
改变
`,
指令：[]
})
导出类应用程序{
imgsrc=”http://az866755.vo.msecnd.net/product/1468402190267-product.jpeg"
btnClick（）
{
此参数为.imgsrc=”http://az866755.vo.msecnd.net/product/1454067764999-product.jpeg" 
}
构造函数（）{}
}

如果我的图像有一个imgsrc和srcset，比如：srcset=“images/ic add copy，该怎么办-3@2x.png2x，图像/集成电路添加副本-3@3x.png3x“？同样的方法？像这样使用[srcset]

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() { }
}