Блог

  <img class="list-image"  [src]="imageStatusReturn(element.ProdId, element.productImageId, element.productImage)"  height="40"
            alt="productImage">
 

Angular как проверять каждые 10 секунд фоновое изображение существует или нет на сервере

 ngOnInit() {
        this.configProductDataSource = new MatTableDataSource([]);
        this.campaignService.getConfigurableProduct().subscribe((response: any) => {
        
            if (response amp;amp; response.data amp;amp; response.data.length > 0) {

                this.isStatusCode = [];
                for (var val of response.data) {
                    this.isStatusCode.push(true)
                }
                this.data = response.data;
                this.configProductDataSource.data = response.data;
                this.displayDataRecords = response.data.length > 0;

                this.imageApi();
                this.backgroundImageGenerate();

            } else {
                this.displayDataRecords = false;
                this.displaySearchRecords = false;
            }
        }, (error) => {
            alert("Something went wrong! try again later.");
            console.log(error);
        });
    }
 

 backgroundImageGenerate()
    {
        var myVar = setInterval(() => {
        this.imageApi();
        if (this.isStatusCode.indexOf(true) - 1) {
            clearInterval(myVar);
        }
        }, 10000)
    }
    

 

     imageApi() {
        this.campaignService.getImageGeneratQueueStatus(this.params.id).subscribe((imgResponse: any) => {
            this.resImgData = imgResponse.data;
            var i;
            for (i = 0; i < this.data.length; i  ) {
                var val = this.data[i];
                var statusDataStore = this.resImgData.find(obj => obj.productId == val['shrt-campaign-product'][0].id amp;amp; obj.productImages == val['shrt-campaign-product'][0]['products']['product_images'][0].id amp;amp; obj.outputImgSize == 'thumbnail_image'  amp;amp; obj.outputImgType == 'png' amp;amp; obj.outputImgBgColor == false)
                
                if (statusDataStore) {
                    switch (statusDataStore.status) {
                        case 0:
                            this.isStatusCode[i] = false;
                            break;
                        case 1:
                            this.isStatusCode[i] = true;
                            break;
                        case 2:
                            this.isStatusCode[i] = true;
                            break;
                        case 3:
                            this.isStatusCode[i] = true;
                            break;
                        case 4:
                            this.isStatusCode[i] = false;
                            break;
                        default:
                            this.isStatusCode[i] = false;
                    }
                } else {
                    this.isStatusCode[i] = false;
                }
            }
        }, (error: any) => {
            if (error.status === API_STATUS_CODE.badRequest) {
                this.notify.error(this.translate(error.error.data));
            }
        });
    }

 

 <ng-container matColumnDef="product_image">
            <mat-header-cell *matHeaderCellDef>{{ 'PRODUCT_IMAGE' | translate:lang }}</mat-header-cell>
            <mat-cell *matCellDef="let element; let j = index"> 
                    <ng-template  [ngIf]="isStatusCode[j] === false">
                        <img class="list-image"  (error)="changeImgSource($event)" [src]="getConfigProductImage(element['shrt-campaign-product'][0]['products']['product_images'])"   height="40"
                      alt="productImage">
                    </ng-template>
                  
                    <ng-template  [ngIf]="isStatusCode[j] === true">
                        <img class="list-image"  (error)="changeImgSource($event)" src="/assets/images/loader.gif"  height="60" alt="noImage">
                    </ng-template>
            </mat-cell>
        </ng-container>


 

 
changeImgSource(event: any) {
   event.target.src = '/assets/images/avatar.png';
}