Angular6 如何更改angular4或更高版本的mouseover和mouseleave上的图像src？

我对angular非常陌生，我想使用鼠标悬停事件来更改src值。我们如何在angular 4或更高版本中做到这一点？请帮帮我

export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'Dashboard',  icon: 'fa fa-tachometer', class: '' ,name:'',src:"../../../../assets/images/header-icon.png",srcOn:"../../../../assets/images/dashboard_highlighted.png"},
{ path: '/forms', title: 'Forms',  icon:'fa fa-eyedropper', class: '',name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/tables', title: 'Desk Blotter',  icon:'fa fa-pencil', class: '' ,name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/bs-element', title: 'Admin',  icon:'fa fa-picture-o', class: '' ,name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:""},
{ path: '/login', title: 'Logout',  icon:'fa fa-power-off', class: '',name:'',src:"../../../../assets/images/dashboard_highlighted.png",srcOn:"" },
];

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}" >
        <a [routerLink]="[menuItem.path]" name="{{menuItem.name}}">
           <img src="{{menuItem.src}}" style="width:66%;"  (mouseenter)="'src=''{{menuItem.srcOn}}'"   id="{{menuItem.title}}"/> {{menuItem.title}}
        </a>
    </li>

导出常量路由：RouteInfo[]=[
{路径：'/dashboard'，标题：'dashboard'，图标：'fa-fa-tachometer'，类：''，名称：''，src:../../../../../assets/images/header-icon.png'，srcOn:../../../assets/images/dashboard_-highlighted.png'}，
{路径：'/forms'，标题：'forms'，图标：'fa-fa滴管'，类别：''，名称：''，src:../../../../assets/images/dashboard_highlighted.png'，srcOn:''，
{路径：'/tables'，标题：'Desk Blotter'，图标：'fa fa pencil'，类：''，名称：''，src:../../../../assets/images/dashboard_highlighted.png'，srcOn:'}，
{path:'/bs element'，title:'Admin'，icon:'fa-picture-o'，class:''，name:''，src:“../../../../../assets/images/dashboard_highlighted.png”，srcOn:''，
{路径：'/login'，标题：'Logout'，图标：'fa fa power off'，类：''，名称：''，src:../../../../../assets/images/dashboard_highlighted.png'，srcOn:''，
];

{{menuItem.title}

让我们看看如何使用模型而不是重写元素属性：

<img [src]="imgSrc"
           (mouseover)="imgSrc = 'http://www.impresabaraldo.it/Blog/wp-content/uploads/2015/05/casa-ecologica-vicenza.jpg'"
           (mouseout)="imgSrc = 'https://www.ediltecnico.it/wp-content/uploads/2017/06/casa-300x223.png'">

注意，我们有一个src属性、一个srcOn和一个srcOut。其思想是将imagessrc属性绑定到这个json对象src属性，然后根据鼠标事件更新json对象src属性

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}" >
    <a [routerLink]="[menuItem.path]" name="{{menuItem.name}}">
      <img style="width:66%;"  id="{{menuItem.title}}"
           [src]="menuItem.src || menuItem.srcOut"
           (mouseover)="menuItem.src = menuItem.srcOn"
           (mouseout)="menuItem.src = menuItem.srcOut"/> {{menuItem.title}}
    </a>
  </li>

{{menuItem.title}

---

最后，我建议您使用mouseover而不是mouseenter

{{{menuItem.title}}获取解析器错误：在[imgSrc=”中的第9列需要表达式的地方获得了插值（{}}）{{menuItem.srcOn}}}']我就是一个例子。我想说的是，使用模型比重写html元素更方便。所以，不要尝试在mouseover或mouseout中添加src属性。而是尝试将图像src绑定到模型，然后更新模型值。您能给我演示一下如何绑定它们的示例代码吗？

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}" >
    <a [routerLink]="[menuItem.path]" name="{{menuItem.name}}">
      <img style="width:66%;"  id="{{menuItem.title}}"
           [src]="menuItem.src || menuItem.srcOut"
           (mouseover)="menuItem.src = menuItem.srcOn"
           (mouseout)="menuItem.src = menuItem.srcOut"/> {{menuItem.title}}
    </a>
  </li>