角度2 - 切换/更改div以设置第一个位置

Question

单击箭头（按钮）时，该图像应设置为主图像，该值也应在后端生效。

我不知道这样做，试过拖拉，但这对我来说还不够

下面给出的代码是div的放置方式

........
  <li>
              <div class="col-xs-12 dishkya">
                <div class="file-up">
                  <input type="file" class="form-control filed" placeholder="Name" (change)="onFileChange($event,shopId)" #fileInput >
                  <img  [src]="getShopImageURL((shopDetail | async)?.main_image)" class="add-pht">
                  <!-- <a class="deleteit"><i class="fa fa-trash" aria-hidden="true"></i></a> -->
                  </div>
              </div>
            </li>
            <li>
              <div class="col-xs-4 dishkya">
                <div class="file-up">
                 <input type="file" class="form-control filed" placeholder="Name"  (change)="SecondFileChange($event,shopId)" #fileInput >
                  <img  [src]="getShopImageURL((shopDetail | async)?.image_one)" class="add-pht">
                  <!-- <a class="deleteit"><i class="fa fa-trash" aria-hidden="true"></i></a> -->
                  </div>
              </div>
            </li>

...........

上传图片的方式

    private imageUpload: any = {
         "upload":""
     };
     private SecondimageUpload: any = {
          "upload":""
      };
...............
...............

onFileChange(event,shopId) {
    var self = this;
    if(event.target.files.length > 0) {
      let file = event.target.files[0];
      this.fileName = file.name;
      this.imageUpload['upload'] = this.fileName;
      this.form.get('upload').setValue(file);

    }
    self.check_publish_status = true;
    this.imageUpload['upload'] = this.fileName;
    const formModel = this.prepareSave();
    var body = formModel;
..................
     return this.http.post(url, body, options)
          .catch(error => Observable.throw(error))
          .subscribe(
              data => {
self.fetchShopData();
        )
    ........................
    ........................

请提供实现此目的的想法。

Answer 1

最好的方法是点击箭头按钮调用您的Rest API后端并在那里设置您的主图像，然后在成功后尝试从后端获取相同的图像并相应地渲染图像位置。