我想从类型脚本函数绑定html标记img的src. 这是我的Html.

<button (click)="createBoard()"> Create Board</button>
<table>
 <tr *ngFor="let i of board; let a = index">
  <td *ngFor="let j of i; let b = index">
    <div class="bDefault">
      <img src="getImage(a,b)"  
      (click)="changeImg(a,b, $event)">
    </div>
  </td>
 </tr>
</table> 

这是我的Typescript .

size : number = 5;
board : number[][] = [];

createBoard(){
 this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = 0;
  }
 }
}

getImage(i:any, j:any){
  if(this.board[i][j] == 0){
    return "../../../assets/oth/default.jpg";
  } else if(this.board[i][j] == 1){
    return "../../../assets/oth/bidak_hitam.jpg";
  } else {
    return "../../../assets/oth/bidak_putih.jpg";
  }
}

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j] == 2){
    this.board[i][j]  = 0;
  } else {
    this.board[i][j] ++;
  }
}

在这段代码中,没有找到图像.有没有办法从打印或Angular 的函数中获取图像?

推荐答案

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

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

要对其进行动态内插,请改用属性绑定

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

在这里,src将从getImage获取动态数据.

Typescript相关问答推荐

React-Native运行方法通过监听另一个状态来更新一个状态

如何推断类方法未知返回类型并在属性中使用它

如何正确修复TypScript 4.7到4.8升级中的TS 2345编译错误

界面中这种类型的界面界面中的多态性

如何防止TypeScript允许重新分配NTFS?

是否可以根据嵌套属性来更改接口中属性的类型?

泛型和数组:为什么我最终使用了`泛型T []`而不是`泛型T []`?<><>

HttpClient中的文本响应类型选项使用什么编码?''

根据上一个参数值查找参数类型,也返回类型

有没有办法解决相互影响的路由之间的合并?

如何在typescript中设置对象分配时的键类型和值类型

使用TypeScrip根据(可选)属性推断结果类型

如何将TS泛型用于react-hook-form接口?

如何正确调用创建的类型?

如何编辑切片器以使用CRUD调用函数?

为什么特定的字符串不符合包括该字符串的枚举?

react 路由不响应参数

Angular NG8001错误.组件只能在一个页面上工作,而不是在她的页面上工作

如何使用angular15取消选中位于其他组件中的复选框

获取类属性的类型';TypeScript中的getter/setter