Question

说我在ts文件中有这个：

:binary.match(my_str, "foo", [{[], {0, 100}}])

:binary.match(my_str, "foo", [{[], [start: 0, length: 100]}])

这在html文件中：

  arrImages = ['Front', 'Back', 'Left', 'Right'];
  Front = "...";
  Back = "...";
  Left = "...";
  Right = "...";
  ChangeImage(pImageView) {
      console.log(pImageView)
  }

标签标注为<ng-container *ngFor="let Item of arrImages"> <label>{{Item}}</label> <img src="{{Item}}"> <button (click)="ChangeImage(Item)">Change</button> </ng-container>或<label>Front</label>等。这是正确的。

按钮显示为<label>Back</label>或<button (click)="ChangeImage('Front')">Change</button>等。这是正确的。

但是如何让 img 以<button (click)="ChangeImage('Back')">Change</button>或<img [src]="Front">出现？因为我无法将图像src与ts变量链接起来。我尝试了所有这些：

<img [src]="Back">

Answer 1

问题是arrImages只包含不正确的图像路径的字符串。

处理此问题的两种方法：

第一种方式 - 自定义管道

将arrImages项目更改为有效的图片路径，如：

arrImages = ['Front.png', 'Back.png', etc...] （您可以删除其他变量）

然后，创建一个自定义管道以从图像路径中提取图像名称

@Pipe({
  name: 'extractednamefromfilepath'
})

export class ExtractNameFromFilePathPipe implements PipeTransform 
{
  transform(val:string) : string 
  {
    // Split full path into small chunks of path (img/image.png => ['img', 'image.png']
    var splittedPath = value.split('/');

    // Sub the 4 last char of the last splittedPath chunk ('image.png' => 'image')
    return splittedPath[splittedPath.length - 1]
          .substring(splittedPath[splittedPath.length - 1].length - 4);
  }
}

并以这种方式使用

<ng-container *ngFor="let Item of arrImages">
    <label>{{Item | extractnamefromfilepath}}</label>
    <img src="{{Item}}">
    <button (click)="ChangeImage(Item)">Change</button>
</ng-container>

在ChangeImage函数中，Item现在是图像的 Path ，但您可以使用与管道类似的函数从路径中提取名称。

第二种方式 - 类

制作类似

的课程

export class ImageHolder 
{
    imgPath: string;
    imgName: string;

    constructor(imgPath: string)
    {
        this.imgPath = imgPath;
        imgName = extractNameFromPath(imgPath);
    }

    extractNameFromPath(imgPath: string) : string
    {
        // Split full path into small chunks of path (img/image.png => ['img','image.png']
        var splittedPath = value.split('/');

        // Sub the 4 last char of the last splittedPath chunk ('image.png' => 'image')
        return splittedPath[splittedPath.length - 1]
              .substring(splittedPath[splittedPath.length - 1].length - 4);
    }
}

然后使你的数组像

arrImgs = [];
arrImgs.push(new ImageHolder('Front.png'), new ImageHolder('Back.png'), etc..);

并像

一样使用它

<ng-container *ngFor="let Item of arrImages">
    <label>{{Item.imgName}}</label>
    <img src="{{Item.imgPath}}">
    <button (click)="ChangeImage(Item.)">Change</button>
</ng-container>

在ChangeImage函数中，item现在是 ImageHolder对象。

希望有所帮助

Answer 2

您可以使用方括号表示法来传递正确的绑定：

<img [src]="this[Item]">

角度理解属性绑定

2 个答案: