从Typescript函数绑定Angular的img src

huangapple
go评论102阅读模式
英文:

Angular bind img src from typescript function

问题

我想从TypeScript函数中绑定HTML标记的图像源。以下是我的HTML。

  1. <button (click)="createBoard()">创建棋盘</button>
  2. <table>
  3.   <tr *ngFor="let i of board; let a = index">
  4.     <td *ngFor="let j of i; let b = index">
  5.       <div class="bDefault">
  6.         <img [src]="getImage(a, b)" (click)="changeImg(a, b, $event)">
  7.       </div>
  8.     </td>
  9.   </tr>
  10. </table>

这是我的TypeScript。

  1. size: number = 5;
  2. board: number[][] = [];
  4. createBoard() {
  5.   this.board = new Array(this.size);
  6.   for (let i = 0; i < this.size; i++) {
  7.     this.board[i] = new Array(this.size);
  8.     for (let j = 0; j < this.size; j++) {
  9.       this.board[i][j] = 0;
  10.     }
  11.   }
  12. }
  14. getImage(i: any, j: any) {
  15.   if (this.board[i][j] == 0) {
  16.     return "../../../assets/oth/default.jpg";
  17.   } else if (this.board[i][j] == 1) {
  18.     return "../../../assets/oth/bidak_hitam.jpg";
  19.   } else {
  20.     return "../../../assets/oth/bidak_putih.jpg";
  21.   }
  22. }
  24. changeImg(i: any, j: any, event: Event) {
  25.   if (this.board[i][j] == 2) {
  26.     this.board[i][j] = 0;
  27.   } else {
  28.     this.board[i][j]++;
  29.   }
  30. }

在这段代码中，图像无法找到。是否有一种从TypeScript或Angular函数获取图像的方法？

英文:

I want to bind src of html tag img from typescript function.
Here is my Html.

  1. &lt;button (click)=&quot;createBoard()&quot;&gt; Create Board&lt;/button&gt;
  2. &lt;table&gt;
  3.  &lt;tr *ngFor=&quot;let i of board; let a = index&quot;&gt;
  4.   &lt;td *ngFor=&quot;let j of i; let b = index&quot;&gt;
  5.     &lt;div class=&quot;bDefault&quot;&gt;
  6.       &lt;img src=&quot;getImage(a,b)&quot;  
  7.       (click)=&quot;changeImg(a,b, $event)&quot;&gt;
  8.     &lt;/div&gt;
  9.   &lt;/td&gt;
  10.  &lt;/tr&gt;
  11. &lt;/table&gt;

And here is my typescript.

  1. size : number = 5;
  2. board : number[][] = [];
  4. createBoard(){
  5.  this.board = new Array(this.size);
  6.  for(let i=0; i&lt;this.size; i++){
  7.   this.board[i] = new Array(this.size);
  8.   for(let j=0; j&lt;this.size; j++){
  9.     this.board[i][j] = 0;
  10.   }
  11.  }
  12. }
  14. getImage(i:any, j:any){
  15.   if(this.board[i][j] == 0){
  16.     return &quot;../../../assets/oth/default.jpg&quot;;
  17.   } else if(this.board[i][j] == 1){
  18.     return &quot;../../../assets/oth/bidak_hitam.jpg&quot;;
  19.   } else {
  20.     return &quot;../../../assets/oth/bidak_putih.jpg&quot;;
  21.   }
  22. }
  24. changeImg(i:any, j:any, event:Event){
  25.   if(this.board[i][j] == 2){
  26.     this.board[i][j]  = 0;
  27.   } else {
  28.     this.board[i][j] ++;
  29.   }
  30. }

In this code the image is not found. Is there a way to get the image from a function in typescript or angular?

答案1

得分: 3

getImage(a,b) 在你的代码中被用作一个静态字符串

  1. <img src="getImage(a,b)" (click)="changeImg(a,b, $event)">

为了动态插值它，请改用属性绑定

  1. <img [src]="getImage(a, b)" (click)="changeImg(a, b, $event)">

这里的 src 会从 getImage 获取动态数据。

英文:

In your code the getImage(a,b) is being used as a static string

  1. &lt;img src=&quot;getImage(a,b)&quot; (click)=&quot;changeImg(a,b, $event)&quot;&gt;

to dynamically interpolate it use the property binding instead

  1. &lt;img [src]=&quot;getImage(a, b)&quot; (click)=&quot;changeImg(a, b, $event)&quot;&gt;

Here the src would get dynamic data from getImage.

答案2

得分: 0

你应该避免在.html中使用函数，我建议您创建一个包含值和路径的对象数组，类似于以下代码：

  1. this.board = new Array(this.size);
  2. for(let i=0; i<this.size; i++){
  3.   this.board[i] = new Array(this.size);
  4.   for(let j=0; j<this.size; j++){
  5.     this.board[i][j] = {value:0, path:'assets/oth/default.jpg'};
  6.   }
  7. }

当更改图像时，您的函数应该像这样：

  1. changeImg(i:any, j:any, event:Event){
  2.   if(this.board[i][j].value == 2){
  3.     this.board[i][j] = {value:0, path:'assets/oth/default.jpg'};
  4.   } else {
  5.     if (this.board[i][j].value == 0)
  6.       this.board[i][j] = {value:1, path:'assets/oth/bidak_hitam.jpg'};
  7.     else
  8.       this.board[i][j] = {value:2, path:'assets/oth/bidak_putih.jpg'};
  9.   }
  10. }

因此，您应该使用以下方式：

  1. <img src="board[a][b].path" (click)="changeImg(a, b, $event)">

不要强制Angular执行getImage函数。

英文:

You should avoid use a function in the .html, I suggest you create an array of object with value and path. Some like

  1. this.board = new Array(this.size);
  2.  for(let i=0; i&lt;this.size; i++){
  3.   this.board[i] = new Array(this.size);
  4.   for(let j=0; j&lt;this.size; j++){
  5.     this.board[i][j] = {value:0,path:&#39;assets/oth/default.jpg&#39;};
  6.   }
  7.  }

When change the images your function

  1. changeImg(i:any, j:any, event:Event){
  2.   if(this.board[i][j].value == 2){
  3.     this.board[i][j]={value:0
  4.                       path=&#39;assets/oth/default.jpg&#39;}
  5.   } else {
  6.     if (this.board[i][j].value==0)
  7.        this.board[i][j]={value:1
  8.                          path=&#39;assets/oth/bidak_hitam.jpg&#39;}
  9.     else
  10.        this.board[i][j]={value:2
  11.                          path=&#39;assets/oth/bidak_putih.jpg&#39;}
  12.   }
  13. }

So you use

  1.   &lt;img src=&quot;board[a][b].path&quot;  
  2.       (click)=&quot;changeImg(a,b, $event)&quot;&gt;

And not force Angular to execute the function getImage

huangapple
  • 本文由 发表于 2023年6月8日 13:50:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76428927.html
  • angular
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定