получить ошибку при выборе флажка, содержащего несколько изображений

Question

Я работаю в приложении Angular 7, я выбрал одно изображение на разных изображениях,

, для этого я использовал флажок на каждом изображении, но я столкнулся с проблемой

Как изображениеидет от обслуживания, и мы делаем пометку на каждом изображении, поэтому проблема начинается здесь при выборе изображения

Проблемы -:

1. , когда мы выбираем одно изображение, каждое изображение являетсяselected
2. мы не получаем Id Iamge при выборе изображения

Я ставлю код для него -:

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

Один из способов получения идентификатора может быть таким:

(click)=getId($event.target.id), если это не сработает, просто попробуйте с помощью '& event' и посмотрите, какие данные он дает вам с помощью console.log,И я считаю, что проблема с каждым нажатием на изображение состоит в том, что все они имеют одинаковый идентификатор, потому что вы помещаете элемент с 'id' в *ngFor, и вы не должны этого делать.

Answer 2

Вы должны установить уникальный 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>