Angular 2 - Переключение / изменение div для установки первой позиции - PullRequest
Новая
       32

Angular 2 - Переключение / изменение div для установки первой позиции

0 голосов
/ 02 мая 2018

enter image description here

при нажатии на стрелку (кнопку) это изображение должно быть установлено в качестве основного изображения, и это значение также должно действовать в бэкэнде.

Понятия не имею, попробовал драгулу, но мне этого не достаточно

Код, указанный ниже, показывает, как размещается 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();
        )
    ........................
    ........................

Пожалуйста, дайте идею для достижения этой цели.

1 Ответ

0 голосов
/ 02 мая 2018

Лучший способ - нажать кнопку со стрелкой, вызвать API-интерфейс Rest для бэкэнда и установить свое основное изображение тут же, а затем, после успеха, попытаться получить его из бэкэнда и соответствующим образом отобразить положение изображений.

...