Question

我正在尝试从我的ts文件中设置Ionic 3模板中的值，但是我也同时将css附加到它。我收到此错误

错误

错误：未捕获（在承诺中）：错误：没有名称形式的表单控件的值访问器：'image' 错误：没有名称为“image”
的表单控件的值访问器

我的代码如下：

HTML

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

TS

this.image.style.transform = 'rotate(' + this.magneticHeading + 'deg)';

我不确定为什么这不起作用但我开始认为角度不像我在TS文件中想要做的.style.transform...

Answer 1

使用@ViewChild从DOM中引用图像标记。使用[src]而不是ngModel：

<强>打字稿：

  @ViewChild('myImage') myImage;
  magneticHeading = '100';
  image="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png"
  ...
  ngAfterViewInit() {
    this.myImage.nativeElement.style.transform = 'rotate(' + this.magneticHeading + 'deg)';
  }

<强> HTML：

  <img #myImage name="image" id="image" [src]="image" alt="">

DEMO

或者从HTML设置：

  <img #myImage [style.transform]="'rotate(' + magneticHeading + 'deg)'" name="image" id="image" [src]="image" alt="">

<强> DEMO

Ionic 3在html模板中设置值

错误

HTML

TS

1 个答案: