Question

我需要通过调用返回图像路径的函数来动态更改img src，但是当我使用下面的代码时，图像元素显示为<img src(unknown)/>

component.ts：

getMedia(row) {
    this.sharedDataService.inventoryRows.forEach(function(elem){
      if(row.vin === elem.vin){
        console.log(elem.media[0].href);    //logs string correctly
        return elem.media[0].href;
      }
    });
  }

此代码成功将存储在elem.media[0].href中的字符串记录到控制台，因此我确信它会将正确的路径作为字符串返回。

HTML：

<img src="{{getMedia(row)}}" />
//DOM element comes back as <img src(unknown)/>

我也按照其他Stackoverflow的答案尝试了以下内容，但我没有使用这个获得所需的DOM元素

<img [src]="getMedia(row)" />
//DOM element comes back as <img src="null"/>

我确信这应该是可能的，但我显然错过了一些有关其内部运作的幕后知识

Answer 1

您实际上并未从函数返回任何数据，因为return中的.forEach关键字只会中断循环，还会.forEach only ever returns undefined。可以通过将.forEach替换为.find之类的内容来解决此问题，如下所示：

＆＃13;

function broken(){
  var list = [1,2,3,4,5];
  var value = list.forEach(function(num){
    if(num == 2)
       return num;
  });
  return value;
}

function working(){
  var list = [1,2,3,4,5];
  var value = list.find(function(num){
    if(num == 2)
       return num;
  });
  return value;
}


console.log("broken", broken());
console.log("working", working());

＆＃13;

Answer 2

你从foreach循环返回并且没有从getMedia函数返回一个值，使用for循环更快更清楚

 getMedia(row) {
       const data = this.sharedDataService.inventoryRows;
       for(let i = 0; i < data.length; i++;) {
         if(row.vin === data[i].vin){
            return data[i].media[0].href;
         }
       }
       return '';
 }

调用函数

2 个答案: