An issue has occurred: Cannot access null property '0' | Angular version 7

Question

An issue has occurred: Cannot access null property '0' | Angular version 7

Currently, I am attempting to access Observable in the component.html file using the following code:

{{ (pins | async)[0]?.state }}

I am uncertain if this approach is valid, but I am looking to access a single part of the Observable list in HTML without utilizing *ngFor loop. (I am specifically working with Firebase.) Below is the code snippet from component.ts:

pins: Observable<any[]>;

this.pins = this.db.list('pins').snapshotChanges().pipe(
  map(changes => 
    changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
  )
);

Furthermore, here is the JSON data for 'pins':

[
  {
    "$key": "0",
    "pin": 5,
    "state": true
  },
  {
    "$key": "1",
    "pin": 4,
    "state": false
  },
  ...
]

The code functions correctly for the first item, however, it encounters an issue when trying to display subsequent items, resulting in the error message:

ERROR TypeError: Cannot read property '0' of null
    at Object.eval [as updateRenderer] (HomeComponent.html:88)
...

Your assistance in resolving this issue would be greatly appreciated. Thank you!

javascript json angular typescript firebase

Answer 1

Answer №1

To ensure accurate retrieval of items from a list, always check the variable length before accessing its index position:

Modify your HTML as follows:

<ul *ngFor="let pin of pins; let i=index">
    <li>{{ pin.state }} <button mat-button (click)="update(i,pin)">Update Status</button></li>
</ul>
<span *ngIf="pins">
   {{ pins[0].state }} and {{pins.length}}
</span>

In your TypeScript file:

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pins: any;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.db.list('pins').valueChanges().subscribe(value => {
      this.pins = value;
    });
  }
  
  update(i, pin){
    this.db.object('/pins/' + i).update({ pin: pin.pin, state: !pin.state });
  }
}

Check out this WORKING EXAMPLE for reference.

Answer 2

To ensure accurate retrieval of items from a list, always check the variable length before accessing its index position:

Modify your HTML as follows:

<ul *ngFor="let pin of pins; let i=index">
    <li>{{ pin.state }} <button mat-button (click)="update(i,pin)">Update Status</button></li>
</ul>
<span *ngIf="pins">
   {{ pins[0].state }} and {{pins.length}}
</span>

In your TypeScript file:

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pins: any;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.db.list('pins').valueChanges().subscribe(value => {
      this.pins = value;
    });
  }
  
  update(i, pin){
    this.db.object('/pins/' + i).update({ pin: pin.pin, state: !pin.state });
  }
}

Check out this WORKING EXAMPLE for reference.

Answer 3

Answer №2

app.component.ts

export class AppContainer {
      data: Observable<any[]>;
      dataList = [];

      constructor(...) { }

      initialize() {
       ...
       data..subscribe(data => this.dataList = data);
      }

    }

app.component.html

{{ data[0].info }}

or try:

<ng-container *ngFor="let item of data | async; let j = index;">
 <div  *ngIf="j === 0">{{ item.info }}</div>
</ng-container>

Answer 4

app.component.ts

export class AppContainer {
      data: Observable<any[]>;
      dataList = [];

      constructor(...) { }

      initialize() {
       ...
       data..subscribe(data => this.dataList = data);
      }

    }

app.component.html

{{ data[0].info }}

or try:

<ng-container *ngFor="let item of data | async; let j = index;">
 <div  *ngIf="j === 0">{{ item.info }}</div>
</ng-container>

An issue has occurred: Cannot access null property '0' | Angular version 7

Answer №1

Answer №2

Similar questions

Transitioning Angular from TSLint to ESLint: Addressing the Banana-In-Box Issue

Tips for pressing the enter key to submit when faced with two buttons

How is it possible for the entire JavaScript file to run when all I am doing is exporting a single function

Discovering an item within an array of objects using the find method in Ajax

Table displaying the frequency of words in node.js outputs

There are several attributes that Selenium could not find in the element

What is the best way to allow the browser to either download a file or open it in a new tab based on what is feasible? (while maintaining the actual file

Do I still need to use @types/core-js for TypeScript typings in a Node.js application?

Positioning an HTML table with the use of a for loop in JavaScript

What is the best way to set up an on-change listener for material-ui's <CustomInput...>?

Encountering an error in Internet Explorer 11 while loading a page with Angular 2: SCRIPT5009 - 'System' is undefined

Tips for updating border color when focused with styled-components

The functionality of data binding becomes unclear when the ngif directive is applied to a mat-selection-list in

Failed Ajax request due to SyntaxError: JSON parsing error with unexpected input at position 0

Adding a function to the window object using Webpack version 5

Learning the process of reading a JSON file from a folder in an ASP.NET project

Is it okay if I use the attached code to create a filter table?

Tips for utilizing [ngClass] with various class situations in Angular4

Adding a namespace in a .js file

What causes the non-reachable part of the ternary operator to be evaluated prior to updating the state with setTimeout?