TypeError: Cannot read property 'destroyed' of null

[bhavincb]

<ListView class="list-group" [items]="albums"  >       
     <ng-template let-album="item">
         <StackLayout (loaded)="loadComplete()" class="list-group-item">
        <Label  [text]="album.name" class=" list-group-item-heading"></Label>
        <Label  class="list-group-item-text" text="{{album.images.length}} Images"></Label>  
        <WrapLayout *ngIf="album.images.length>0" width="100%"  class="list-group" >
               <WebImage  stretch="aspectFit"  backgroundColor="gray" 
                   [src]="image.thumbnailUrl" *ngFor="let image of album.images"
                   width="20%" [height]="imageElement.getActualSize().width"  #imageElement></WebImage>
         </WrapLayout >
      </StackLayout>
    </ng-template>
</ListView>

if we use above code then app is starting without any errors and output is as expected.

but using below code i get the error that "ERROR TypeError: Cannot read property 'images' of null "

<ScrollView class="list-group"   >       
     <StackLayout>
         <StackLayout *ngFor="let album of albums" (loaded)="loadComplete()" class="list-group-item">
           <Label  [text]="album.name" class=" list-group-item-heading"></Label>
           <Label  class="list-group-item-text" text="{{album.images.length}} Images"></Label>  
           <WrapLayout *ngIf="album.images.length>0" width="100%"  class="list-group" >
               <WebImage  stretch="aspectFit"  backgroundColor="gray" 
                   [src]="image.thumbnailUrl" *ngFor="let image of album.images"
                   width="20%" [height]="imageElement.getActualSize().width"  #imageElement></WebImage>
            </WrapLayout >
         </StackLayout>
    </StackLayout>
</ScrollView>

we can clearly state that both code are equivalent and should give similar output.
but last gives error "ERROR TypeError: Cannot read property 'images' of null"

Detailed error is like this:

JS: ERROR CONTEXT [object Object]
JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'destroy
ed' of null
JS: TypeError: Cannot read property 'destroyed' of null
JS:     at ViewContainerRef_.move (file:///data/data/org.nativescript.bunkerzon/
files/app/tns_modules/@angular/core/bundles/core.umd.js:11506:20)
JS:     at file:///data/data/org.nativescript.bunkerzon/files/app/tns_modules/@a
ngular/common/bundles/common.umd.js:2652:38
JS:     at DefaultIterableDiffer.forEachOperation (file:///data/data/org.natives
cript.bunkerzon/files/app/tns_modules/@angular/core/bundles/core.umd.js:7451:17)

JS:     at NgForOf._applyChanges (file:///data/data/org.nativescript.bunkerzon/f
iles/app/tns_modules/@angular/common/bundles/common.umd.js:2641:17)
JS:     at NgForOf.ngDoCheck (file:///data/data/org.nativescript.bunkerzon/files
/app/tns_modules/@angular/common/bundles/common.umd.js:2627:22)
JS:     at checkAndUpdateDirectiveInline (file:///data/data/org.nativescript.bun
kerzon/files/app/tns_modules/@angular/core/bundles/core.umd.js:12410:19)
JS:     at checkAndUpdateNodeInline (file:///data/data/org.nativescript.bunkerzo
n/files/app/tns_modules/@angular/core/bundles/core.umd.js:13931:20)
JS:     at checkAndUpdateNode (file:///data/data/org.nativescript.bunkerzon/file
s/app/tns_modules/@angular/core/bundles/core.umd.js:13874:16)
JS:     at debugCheckAndUpdateNode (file:///data/data/org.nativescript.bunkerzon
/files/app/tns_modules/@angular/core/bundles/core.umd.js:14767:76)
JS:     at debugCheckDirectivesFn (file:///data/data/org.nativescript.bunkerzon/
files/app/tns_modules/@angular/core/bundles/core.umd.js:14708:13)
JS:     at Object.eval [as updateDirectives] (ng:///HomeModule/HomeComponent.ngf
actory.js:89:9)
JS:     at Object.debugUpdateDirectives [as updateDirectives] (file:///data/data
/org.nativescript.bunkerzon/files/app/tns_modules/@angular/core/bundles/core.umd
.js:14693:21)
JS:     at checkAndUpdateView (file:///data/data/org.nativescript.bunkerzon/file
s/app/tns_modules/@angular/core/bundles/core.umd.js:13840:14)
JS:     at callViewAction (file:///data/data/org.nativescript.bunkerzon/files/ap
p/tns_modules/@angular/core/bundles/core.umd.js:14191:21)
JS:     at execEmbeddedViewsAction (file:///data/data/org.nativescript.bunkerzon
/files/app/tns_modules/@angular/core/bundles/core.umd.js:14149:17)
JS: synct contact success [object Object]
JS: ERROR TypeError: Cannot read property 'images' of null
JS: ERROR CONTEXT [object Object]

i had also tried binding label text to function in which local album variable gets printed like below

<Label [text]="conDir(group)" class=" list-group-item-heading"></Label>

conDir(a){ console.log(a.id) console.log(a.name) return a.name; }

Looking at logs i can verify that "album" is not null and has correct value as it should have.
so i have no idea what can be wrong.

[tsonevn]

Hi, @bhavincb,
Could you provide sample project, which demonstrates the problem with the ngFor?
The issue might be related to #1206.

[bhavincb]

hii @tsonevn ,
At the moment i'm unable to provide sample project because problem we are facing is inside very large project so separating it will take some time.
but as i said i had implemented 2 UI html which should give same output, but second one which is implemented using "ScrollView" and "*ngFor" gives the error i had mentioned above, while first implementation using "ListView" and "ng-template" works perfectly fine.
There is not a single changes made to TS files only HTML files changed , so i can say that "albums" object generated remains same in both cases, and i also checked same by debugging app in chrome dev tools.

[bhavincb]

hi @tsonevn ,
As you had mentioned that there is some issue with *ngIf while using conditions , so i had replaced *ngIf with "visibility", and also tried removing *ngIf but still it is not working and giving same error.

[tsonevn]

Hi, @bhavincb,
I notice that you are using nativescript-web-image-cache plugin in your application.

Regarding that, could you replace WebImage with the Image component provided by NativeScript core modules and check if the issue is related to the plugin's component. After replacing the WebImage, remove the platform with tns platform remove <platform name> and rebuild the app tns run <platoform name>.

[bhavincb]

hii @tsonevn ,
there were no issue with WebImage. i had found problem and solved it.
i'm also adding full information if anyone may need it in future.

<ListView class="list-group" [items]="albumObj.albums"  >       
     <ng-template let-album="item">
         <StackLayout (loaded)="loadComplete()" class="list-group-item">
        <Label  [text]="album.name" class=" list-group-item-heading"></Label>
        <Label  class="list-group-item-text" text="{{album.images.length}} Images"></Label>  
        <WrapLayout *ngIf="album.images.length>0" width="100%"  class="list-group" >
               <WebImage  stretch="aspectFit"  backgroundColor="gray" 
                   [src]="image.thumbnailUrl" *ngFor="let image of album.images"
                   width="20%" [height]="imageElement.getActualSize().width"  #imageElement></WebImage>
         </WrapLayout >
      </StackLayout>
    </ng-template>
</ListView>

in above code albumObj is shared service which has "albums" named array. this service initially fetch previous Albums from the local database. and also request fro new albums data and updates it.

i had getting error i had mentioned in previous comment.

loadComplete(){
    this.cd.detectChanges();
}

above function was real culprit. if i remove the this.cd.detectChanges() code runs without any error.
but doing changeDetection on StackLayouts loaded event and running code i was getting above error and in html file "album" object becomes null.
but Note that while logging checking "albumObj.albums" on 100milisecond time interval i can see that it has perfect value and all albums has images property.

So in conclusion i can say that when using this.cd.detectChanges() in StackLayouts loaded event it destroys objects value in html view. but works perfectly in TS file.
also i really think there is something wrong "loaded" event or "change Detection Ref" please look into this if possible.

[edusperoni]

We're having the same issue. As soon as we hook a "loaded" listener, all hell breaks loose. We're using a directive to add some attributes to a TextField on Android, no change detection at all. Even just binding a (loaded)="doesNothing()" is enough to trigger this error.

If we use a single Label inside the for and set (loaded)=printThis(item) we don't get a crash, but we do get an error accessing "item" and the function prints "null". Immediately after it prints the correct object, as if the Label was loaded twice.

I can set up a playground if needed.

[tsonevn]

Hi @edusperoni,
Can you provide a sample project and more info about your environment(CLI, tns-core-modules, nativescript-angular, runtime versions)?

[edusperoni]

@tsonevn Here you go:
https://play.nativescript.org/?template=play-ng&id=hpl6OJ

[edusperoni]

I'd also like to add that this issue also happens using RadListView, but it's actually a little worse. We have recently started using RadListView with this template:

<ng-template (...)>
<MyComponent [item]="item.details"></MyComponent>
</ng-template>

and we use (loaded) inside this component. As soon as we changed from ListView to RadListView, it complained about not being able to read "details" of undefined and PullToRefresh stopped working for some reason. Adding a *ngIf="item" solves this, but seems a little too hacky.

Are there any updates on this issue?

[tsonevn]

HI @edusperoni,
If you are facing a problem with RadListView, please log a new issue in nativescript-ui-feedback repository.