Вызов метода из HTML только один раз в Angular2

Question

Я хотел бы реализовать img, где src зависит от переменной в back.поэтому у меня есть это:
<img src="./image/-ex-{{getImg()}}.png" />

Но он вызывает функцию каждого события экрана.Я хочу, чтобы он загружал картинку в начале, а потом никогда больше не вызывал эту функцию

моя спина:

`getImg() {
    return this.iso === '0' ? 'a' :
           this.iso === '1' ? 'b' :
           this.iso === '2' ? 'c' :'d';
  }`

Answer 1

Просто объявите переменную, например, private imgUrl: string;, затем в вашем ngOnInit() или constructor() вызове this.imgUrl = getImg() и в вашем HTML <img src="./image/-ex-{{imgUrl}}.png" />

Answer 2

Вместо src = "./ image / -ex - {{getImg ()}}. Png", src = "./ image / -ex - {{iso}}. Png" и получите значение этого.iso в конструкторе или ngInit.

Это позволит избежать многократного вызова функции.

Answer 3

просто используйте логическое значение, чтобы убедиться, что метод вызывается раньше

`getImg() {
    if(this.calledBefore) {
      return;
    }
    this.calledBefore = true;
    return this.iso === '0' ? 'a' :
           this.iso === '1' ? 'b' :
           this.iso === '2' ? 'c' :'d';
  }

Или используйте переменную для сохранения URL-адреса изображения в компоненте

constructor() {
   this.imageUrl = this.getImg();
}

`