Angular 2/4/5中通过name属性获取DOM元素及修改循环img的src

1. 如何在Angular 2/4/5中通过name属性获取DOM元素？ #

首先得明确：Angular的设计核心是数据驱动视图，尽量避免直接操作DOM。但如果确实有特殊场景需要这么做，这里有两种靠谱的方式：

• 用@ViewChildren配合视图查询（推荐）
  先给目标元素加个模板引用变量，再在组件类里通过@ViewChildren获取所有匹配元素，最后根据name属性筛选。示例如下：

  模板代码：

  <img name="user-avatar" #dynamicImg src="">
  <img name="banner" #dynamicImg src="">
  

  组件类代码：

  import { Component, ViewChildren, ElementRef, QueryList, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
  })
  export class MyComponentComponent implements AfterViewInit {
    @ViewChildren('dynamicImg') imgElements: QueryList<ElementRef>;
  
    ngAfterViewInit() {
      // 根据name属性找到目标元素
      const avatarImg = this.imgElements.find(img => img.nativeElement.name === 'user-avatar');
      if (avatarImg) {
        // 拿到DOM元素后就可以做你需要的操作了
        console.log(avatarImg.nativeElement);
      }
    }
  }
  

• 直接使用原生DOM API（谨慎使用）
  如果你熟悉原生JS，可以在ngAfterViewInit钩子（确保视图已渲染完成）里用document.querySelector或document.getElementsByName来获取元素：

  import { Component, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
  })
  export class MyComponentComponent implements AfterViewInit {
    ngAfterViewInit() {
      // 获取单个name匹配的元素
      const targetImg = document.querySelector('img[name="user-avatar"]');
      // 或者获取所有同名元素
      const allAvatarImgs = document.getElementsByName('user-avatar');
    }
  }
  

  👉 注意：这种方式会绕过Angular的变更检测，可能导致视图和数据不同步，非必要不推荐。

2. 修改*ngFor生成的img标签的src属性 #

针对你的场景，最符合Angular最佳实践的方式是通过数据绑定实现——毕竟*ngFor是基于数组数据渲染的，只要更新数组里的数据，视图会自动同步更新，完全不需要手动操作DOM。

推荐方案：数据绑定 #

1. 先给list数组的每个元素添加上src字段（如果原本没有的话）：

   // 组件类中初始化数组
   list = [
     { name: 'img-1', url: '/page-1', src: '' },
     { name: 'img-2', url: '/page-2', src: '' },
     // ...其他元素
   ];
   

2. 在模板里把src属性绑定到lt.src：

   <div *ngFor="let lt of list">
     <div>
       <a href="{{lt.url}}" target="_self">
         <img mat-card-image name="{{lt.name}}" class="image" [src]="lt.src" placement="top" container="body">
       </a>
     </div>
   </div>
   

3. 之后在TypeScript里需要修改src时，直接更新数组对应元素的src值就行：

   // 示例：根据name找到元素并更新src
   updateImgSrc(targetName: string, newSrcUrl: string) {
     const targetItem = this.list.find(item => item.name === targetName);
     if (targetItem) {
       targetItem.src = newSrcUrl;
       // Angular会自动检测到数据变化，同步更新视图
     }
   }
   

如果必须直接操作DOM（不推荐） #

如果因为特殊原因一定要手动修改DOM，可以用@ViewChildren获取所有生成的img元素，再遍历修改：

1. 模板添加模板引用变量：

   <div *ngFor="let lt of list">
     <div>
       <a href="{{lt.url}}" target="_self">
         <img #dynamicImg mat-card-image name="{{lt.name}}" class="image" src="" placement="top" container="body">
       </a>
     </div>
   </div>
   

2. 组件类中获取并修改：

   import { Component, ViewChildren, ElementRef, QueryList, AfterViewInit } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html'
   })
   export class MyComponentComponent implements AfterViewInit {
     @ViewChildren('dynamicImg') dynamicImgs: QueryList<ElementRef>;
     list = [/* 你的数组数据 */];
   
     ngAfterViewInit() {
       // 遍历所有img，根据name修改src
       this.dynamicImgs.forEach(img => {
         const imgElement = img.nativeElement;
         if (imgElement.name === 'img-1') {
           imgElement.src = 'https://example.com/new-img-1.jpg';
         }
       });
     }
   
     // 动态修改方法
     updateImgByName(targetName: string, newSrc: string) {
       const targetImg = this.dynamicImgs.find(img => img.nativeElement.name === targetName);
       if (targetImg) {
         targetImg.nativeElement.src = newSrc;
       }
     }
   }
   

👉 再次提醒：优先用数据绑定的方式，这能让你的代码更易维护，也更贴合Angular的设计理念。

内容的提问来源于stack exchange，提问作者Vinod