Ionic 3中HTML模板设值并加CSS时遇ngModel无值访问器错误

这个错误的根源很明确：<img>标签不是表单控件，Angular的[(ngModel)]指令是专门为<input>、<select>这类实现了ControlValueAccessor接口的表单元素设计的，img标签根本不具备表单控件的特性，直接绑定ngModel肯定会报错。

下面是针对你的代码的具体修复方案：

步骤1：移除img标签上的表单相关属性 #

首先把HTML里的[(ngModel)]和name属性删掉，这俩对img来说完全没用：

<img id="image" src="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png" alt="">

步骤2：用Angular风格控制图片的样式/属性 #

如果你想在TS里操作img的样式或者src，推荐两种更符合Angular规范的方式：

方式一：使用模板引用变量 + ViewChild（适合直接操作DOM） #

先给img加一个模板引用：

<img #imageRef id="image" src="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png" alt="">

然后在TS组件里通过@ViewChild获取这个元素，确保DOM初始化后再修改样式：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('imageRef') imageElement: ElementRef;

  ngAfterViewInit() {
    // 这里可以安全操作DOM元素样式
    this.imageElement.nativeElement.style.border = '2px solid #ff0000';
    this.imageElement.nativeElement.style.width = '200px';
  }

  // 也可以在自定义方法里动态修改样式
  toggleImageOpacity() {
    const currentOpacity = this.imageElement.nativeElement.style.opacity;
    this.imageElement.nativeElement.style.opacity = currentOpacity === '0.5' ? '1' : '0.5';
  }
}

方式二：使用属性绑定（响应式风格，更推荐） #

如果想通过TS变量控制样式/图片地址，用Angular的属性绑定会更优雅：

• 先在TS里定义需要绑定的变量：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  // 控制图片地址
  imageSrc = 'https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png';
  // 控制单个样式属性
  imageBorder = '2px solid #00ff00';
  imageWidth = 250; // 用.px后缀可直接传数字
}

• 然后在HTML里绑定这些变量：

<img [src]="imageSrc" [style.border]="imageBorder" [style.width.px]="imageWidth" alt="">

这种方式不需要直接操作DOM，完全通过数据驱动更新视图，更符合Angular的设计理念。

总结 #

记住：ngModel只适用于表单控件，非表单元素（比如img、div、p）都不能直接用它。用上面的两种方式，就能顺利在TS里控制img的样式和属性啦。

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