CODEWITHSUNDEEP
javascriptangularionic-frameworkionic4ionic5
Juance
Juance

Reputation: 36

Push on an array when listening to an event

I am working with Ionic and I want to push an array of an object, when an event is emitted.

I have this

    export  class PublicationService {

    constructor(
        private storage: Storage
    ){}

    private addPublicationSubject = new BehaviorSubject<PublicationModel>(new PublicationModel());
    data = this.addPublicationSubject.asObservable();

    publishData(data: PublicationModel) {
        this.addPublicationSubject.next(data);
    }
   }

Here, event is emitted

    savePublication() {
    this.newPublication.id_pub = 1;
    this.newPublication.textPub = this.f.text.value;
    this.newPublication.user_sender = 'Juance';
    this.newPublication.datetime = "asd";
    this.pubService.publishData(this.newPublication);
  }

And on my home page the event is listen (in ngOnInit)

// Variable defined in the component
publications: PublicationModel[] = [];

//ngOnInit
this.pubService.data.subscribe((data) => {
      if (data != null) {
        console.log(data);

        this.publications.push(data);
      }
});

Now my problem is: when I try to push the data into the array it tells me it cannot read property of null (this.publications).

When entering the subscribe of the event, it does not take the variable as defined in the component. Any ideas?

enter image description here

EDIT:

My component HomePage

    @Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  viewAddPublication: boolean;
  publications: PublicationModel[] = [];
  countLikePub:   number;
  addPublication: any;

  constructor(
    private storage: Storage,
    private navCtrl: NavController,
    private pubService: PublicationService) {
      this.publications = new Array<PublicationModel>();
  }

  ngOnInit() {
    this.publications = [];

    this.pubService.data.subscribe((data) => {
      if (data != null) {
        console.log(data);

        this.setData(data);
      }
    }
    );
    this.viewAddPublication = false;
    this.countLikePub = 0;

    this.storage.get('publications').then((val) => {
      this.publications = val;
    });

  }

  setData(data) {
    this.publications.push(data);
  }

  goToAddPub() {
    this.navCtrl.navigateForward('/add-publication', {
      animated: true,
      animationDirection: "forward",

    });
  }

  public likedPost(event) {
    console.log();
    let like = (document.getElementById(event.target.id) as HTMLElement);
    like.style.color = '#0277bd';
    this.countLikePub++;
  }

debug mode in chrome

enter image description here

I need a way to push an array in real time and this is the only way I could think of, the other is to use Socket.io

Upvotes: 0

Views: 160

Answers (1)

John
John

Reputation: 11399

I think maybe you are setting publications to null because of this function:

this.storage.get('publications').then((val) => {
  this.publications = val;
});

You could change it a little bit to make sure publications are still an array

this.storage.get('publications').then((val) => {
   this.publications = val || [];
});

I added this.publications = val || []; which is creating an empty array if val is not defined

Upvotes: 1

Related Questions