*ngIf not working

Ionic Framework ionic-v3
1

Hi all,
in component I have prepared uploading of object in array. Before uploading of next object is timeout 20s. Before upload starts I copy the uploading object to the variable and want to show it in template. Bu *ngIf condition works only if in array is only one object. My question is, why this is happening? My code bellow.

component:

if (this.dictatesArray && this.dictatesArray.length > 0) {

                    this.globalTimeout = setTimeout(() => {
                        if (!this.showDelete) {
                            this.zone.run(() => {
                                if (this.dictatesArray && this.dictatesArray.length > 0) {

                                    let sortedForUpload = this.dictatesArray.sort((a, b) => {
                                        return moment(a.created).unix() < moment(b.created).unix() ? 1 : -1
                                    })
                                    console.log("SORTED UPLOAD ARRAY:", sortedForUpload);
                                    this.uploadingDictate = sortedForUpload[0]
                                    console.log("DICTATE FOR UPLOAD:", this.uploadingDictate);

                                    console.log("===== START UPLOADING OF DICTATE: =====", this.dictatesArray[this.dictatesArray.length - 1])
                                    this.dbP.exportDb(this.dictatesArray[0]);
                                    this.dictatesArray.splice(0, 1);
                                }
                                
                            });
                        }
                    }, 20000)

                    if (this.loader) {
                        this.loader.dismiss();
                    }
                    this.uploadTimeouts[this.dictatesArray[this.dictatesArray.length - 1].uuid] = this.globalTimeout
                    console.log(this.dictatesArray)
                    console.log("TIMEOUTS:", this.uploadTimeouts)

                } else {
                    clearTimeout(this.globalTimeout);
                    console.log("======= TAB2 LOADER DISMISS =======")
                    if (this.loader) {
                        this.loader.dismiss();
                    }

template:

//current uploading object data
<ion-card *ngIf="uploadingDictate">

</ion-card>

//array of next objects for upload
    <ion-card [ngClass]="{'showDelete': showDelete}" *ngFor="let d of dictatesArray">

    </ion-card>
2

Using setTimeout is a mistake 99% of the time. What do you want your page to do?

3

first ioncard will check

(!isNull() && isDefined && !==false) || === true .  else not displaying 

//current uploading object data
<ion-card *ngIf="uploadingDictate">

</ion-card>

second ngfor

  <ion-card [ngClass]="{'showDelete': showDelete}" *ngFor="let d of dictatesArray">

    </ion-card>

will listen to any changes to dictatesArray, so if 1 , would loop once, if 2 would loop twice
but im suspecting your code this.dictatesArray.splice(0, 1);
will always remove 1 array

4

@AaronSterling
Am I creating the objects of data. This objects should be uploaded (after zipping). But application should wait 20s before each upload of object - that is why I am using timeout

@davidvalen95
First ion-card has also data like:

  <div class="title">
                <h2>{{uploadingDictate.title}}</h2>
</div>

But I do not copied it due to code length.

code this.dictatesArray.splice(0, 1); is because I want to remove uploading object from array under first ion-card. But even if I remove this pease of code. The result is still the same.

EDIT: In console in variable uploadingDictate is right object. So code is working like I need, But template do not rerender :-/

5

i dont know if content should be inside ion-card-content or not. outside ion-card-content might not displaying the content. pls try

<ion-card>
  <ion-card-content>
      <div class="title">
                <h2>{{uploadingDictate.title}}</h2>
      </div>
  </ion-card-content>

</ion-card>
6

I have it in ion-card-content. The code is working - but only if there is only ONE object for upload :-/

This is my Question - why it is working only with ONE object in array? If I have more than one objects in array, the first card is not showed, but in console in uploadingDictate variable are data that I need.