Angular2 innerHtml不断更新

Question

I think this is more of a style question than anything but I want to make sure I am doing this correctly.

I have an endpoint that I am calling which is annoyingly returning a SVG image instead of a full jpeg or png and I need to display that on the page. I created a service that calls out and grabs the SVG. That service gets called from a method in the component called getImage(id).

In my HTML I have something like:

<div [innerHtml]="getImage(id)></div>

One thing I noticed is that I can't really inspect the SVG in chrome because it's constantly updating. I am wondering if this is a problem and if so how to fix it? It looks like it's just constantly calling the update method but nothing has changed on the page (as far as I can tell) so the change detection shouldn't be triggered?

Answer 1

Example for my comment:

import { ..., OnInit, ... } from '@angular/core'

@Component({ ... })
export class ...Component implements OnInit {
   private image: string;

   constructor(...) { ... }

   public ngOnInit(): void {
      this.getImage(1); //Get id from somewhere
   }

   private getImage(id): void {
      ...
      this.image = ...;
   }
}

HTML

<div [innerHtml]="image"></div>