<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.
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 "
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:
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.