html模板中的Ionic 3设置值

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)';

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

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