Ionic 3 在 html 模板中设置值

Question

我试图在我的 ts 文件中的 Ionic 3 模板中设置一个值，但是我同时也在向它附加 css。我收到这个错误

错误

Error: Uncaught (in promise): Error: No value accessor for form control with name: 'image' Error: No value accessor for form control with name: '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)';

我不确定为什么这不起作用，但我开始认为 angular 不喜欢我在 TS 文件中通过 .style.transform... [=15= 尝试做的事情]

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 模板中设置值

Ionic 3 set value in html template

javascript

typescript

ionic-framework

angular-ngmodel

错误

HTML

TS