无法使用 Angular 6 在按钮单击时加载动态图像

Question

我在点击按钮时加载了 3 组动态图像：

在单击按钮之前，必须显示默认图像 --> 它作为单个图像工作

在按钮上，根据它必须加载和显示的按钮 ID，单击数组中的任何图像

问题：

点击数据集一（即 id : 1）后，基于图像必须加载并覆盖默认图像，但随着数据集一的图像，默认图像也会显示，并且缺少第一个位置的图像。

同样，每当我单击另一个按钮时，图像正在加载，但它显示上一个图像（最后一个按钮最后一个图像），并且第一个数组索引图像没有显示

下图是点击按钮前的默认图片：

图片=[

 {
"img": "https://dummyimage.com/200x200/000/fff.jpg&text=a"
 }
 ];

按钮是使用动态数据生成的：

 buttonData = [
       {
         "id": 1,
         "name":"Data Set One"
       },
       {
        "id": 2,
        "name":"Data Set Two"
      },
      {
        "id": 3,
        "name":"Data Set Three"
      }
     ]


     count: number;
     currentImgUrl: string ;

  constructor(){
        this.count = 0;
        this.setImgUrl();
  }




    next(): void {
      this.count++;
      if (this.count >= this.images.length)
        this.count = 0;
      this.setImgUrl();
    }

    prev(): void {
      this.count--;
      if (this.count < 0)
        this.count = this.images.length - 1;
      this.setImgUrl();
    }

    setImgUrl(): void {
      this.currentImgUrl = this.images[this.count].img;
    }

       getImageData(id){
      this.images=[];
     if(id===1){

       this.count =0;
       this.images = [
          {
            "img":"https://dummyimage.com/200x200/000/fff.jpg&text=B"
          },
          {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=C"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=D"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=E"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=F"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=G"
         }
        ];
     }
     if(id===2){

      this.count =0;
      this.images = [
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=H"
         },
         {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=I"
        },
        {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=J"
        }
       ];
    }
    if(id===3){

      this.count =0;
      this.images = [
          {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=K"
         },
         {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=L"
        },
        {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=M"
        }
       ];
    }

    }

.html代码

<div class="container">
  <div class="row">
     <div class="col-xs-3 help_modal">
                                    <div *ngFor="let btnData of buttonData">
                                        <button type="button" class="btn btn-primary" id="{{btnData.id}}" (click)="getImageData(btnData.id)">{{btnData.name}}</button>
                                    </div>
                                </div>

<div  class="col-xs-9">
                                    <img [src]="currentImgUrl" style="width: 50%">
                                </div>

  </div>


                                 <button type="button" (click)="prev()" [disabled]="count == 0" class="btn btn-primary">Prev</button>
                            <button type="button" (click)="next()" [disabled]="count == images.length - 1" class="btn btn-primary">Next</button>


</div> 

这是我的 stackblitz 工作链接：https://stackblitz.com/edit/angular-yoey9z

Answer 1

在第 116 行致电 this.setImgUrl(); 重置您的列表。