选择复选框时出错，包含多个图像

Posted 2021-04-29

我在Angular 7应用程序中工作，我在其他各种图像上选择了一个图像，

为此，我在每个图像上使用了复选框，但我遇到了问题

由于Image来自服务，我们正在对每个Image进行说明，因此问题从这里开始选择Image

问题 -：

1. 当我们选择一个图像时，每个图像都被选中
2. 我们没有在选择图像时获得图像的Id

我正在为它准备代码 - ：

html - ：

  <div *ngFor="let img of Images">
   <ul>
    <li><input type="checkbox" id="cb1" [(ngModel)]="img.id" (change)='getId(img.id)' />
      <label for="cb1"><img src="{{img.photo}}" /></label>
    </li>

  </ul>
  </div>

ts - ：

   Images: any;
      UserPhoto: any;
      getavator(){

        this.rest.avatarList('Bearer ' +this.token).then(res => {
          if(res['status'] == 1){
            this.Images = res['data'];
            console.log(this.Images);
          } })
      }
      select(value){
        console.log(value);
      }

答案

您应该为输入复选框设置唯一的id并标记for属性。通过这种方式，您可以在选中复选框时阻止选中所有复选框。

  <div *ngFor="let img of Images">
   <ul>
    <li><input type="checkbox" id="{{img.id}}" [(ngModel)]="img.id" (change)='getId(img.id)' />
      <label for="{{img.id}}"><img src="{{img.photo}}" /></label>
    </li>

  </ul>
  </div>

另一答案

捕获id的一种方法可能是这样的：

(click)=getId($event.target.id)，如果这不起作用，只需尝试'＆event'，看看它为console.log提供了哪种数据。而且我相信每次点击图片的问题都是所有人都有相同的ID，因为你在*ngFor中放了一个带有'id'的元素，你不应该这样做。