Question

我想实现img，src取决于后面的变量。所以我有这个：
<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

只需使用布尔值来验证在

之前调用该方法

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

或使用varible将图像URL存储在组件中

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

`

Answer 3

而不是src =＆＃34; ./ image / -ex - {{getImg（）}}。png＆＃34;，src =＆＃34; ./ image / -ex - {{iso}}。 PNG＆＃34;并在构造函数或ngInit中获取this.iso的值。

这将避免多次调用该函数。

在Angular2中只从HTML调用一次方法

3 个答案: