Question

我正在使用Angular 7 Application，我在其他其他图片上选择了一个图片，

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

由于Image来自服务，并且我们在每个Image上进行迭代，所以问题就从选择Image开始了

问题-：

当我们为每个图像选择一个图像时
我们在选择图片时没有获得Iamge的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);
      }

Answer 1

您应为输入复选框和标签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>

Answer 2

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

(click)=getId($event.target.id)，如果这样做不起作用，请尝试使用'＆event'，并通过console.log查看它为您提供了什么样的数据。而且我相信每次点击图片的问题在于它们都具有相同的ID，这是因为您将带有'id'的元素放在*ngFor内，因此您不应该这样做。

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

2 个答案: