Why do I keep getting error while pushing data to Array in Angular 10?

Question

I'm trying to create Angular Material Chips as shown on the site, but I keep getting this error about the array being null.

Here's the component

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IStatement } from 'src/Interface/ICorporateStatement';
import { StatementService } from '../services/statement.service';
import { MatChipInputEvent } from '@angular/material/chips';
import {COMMA, ENTER} from '@angular/cdk/keycodes';

export interface Tag{
  corporate_statement_link_id: number;
  name: string;
}


@Component({
  selector: 'app-statement-detail',
  templateUrl: './statement-detail.component.html',
  styleUrls: ['./statement-detail.component.css']
})
export class StatementDetailComponent implements OnInit {

  statement: IStatement;
  id: number;

  tags: Tag[] = [];
  
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  
  constructor(private statementService: StatementService, 
    private router:ActivatedRoute) { }

  ngOnInit(): void {

    this.tags = [
      { corporate_statement_link_id: 1, name: 'EDI'}
    ];
  
    console.log("Tags: ", this.tags);

    this.router.queryParams.subscribe(param => {
      this.id = param.id;
      this.getStatement(this.id);
    });
  }

  addTag(event: MatChipInputEvent): void {

    console.log(this.tags);
    const input = event.input;
    const value = event.value;
    console.log("Input: ", input);
    console.log("Value: ", value);
    console.log("Tags: ", this.tags);

    this.tags.push({corporate_statement_link_id: this.statement.corporate_statement_link_id, name: value.trim()});

    // // Add our fruit
    // if ((value || '').trim()) {
    //   this.fruits.push({name: value.trim()});
    // }

    // // Reset the input value
    // if (input) {
    //   input.value = '';
    // }
  }

  removeTag(tag: Tag): void {
    console.log("removing");
    // const index = this.fruits.indexOf(fruit);

    // if (index >= 0) {
    //   this.fruits.splice(index, 1);
    // }
  }
  // get statement
  getStatement(id){
    this.statementService.getStatement(id).subscribe(data => {
      this.statement = <IStatement>data[0];

      //get tags
      this.statementService.getTags(this.statement.corporate_statement_link_id)
        .subscribe(tag => {
          this.tags = <Tag[]>tag;
        })

    }, error => {
      console.log(error);
    });

  }

}

I've refactored the code and moved things here and there, but still can't figure out why the array is still null.

Assumption is that this.tags = <Tag[]>tag; is resulting in this.tags being null and then this.tags.push() fails. — Zze
– Zze, Commented Nov 19, 2020 at 4:03

JBoothUA · Accepted Answer · 2020-11-19 04:21:07Z

2

It looks like this code is setting this.tags to null.

.subscribe(tag => {
          this.tags = <Tag[]>tag;
        })

It may be an issue with your <Tag[]> cast, or maybe the data coming back is null?

if it is expected you could replace any null value here with an empty array like this:

.subscribe(tag => {
          this.tags = <Tag[]>tag || [];
        })

and see if that helps.

answered Nov 19, 2020 at 4:21

JBoothUA

3,1976 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1828605 Over a year ago

That is absolutely right. I just figured that out too, and found your answer.

Zze Over a year ago

Won't be an issue with the cast as that is compile time only, it will be that the result was null.

Collectives™ on Stack Overflow

Why do I keep getting error while pushing data to Array in Angular 10?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related