Geek Answers Handbook

Angular 2 SimpleChanges Object throws an error from the first npm start

In my angular 2 application, there is a component that contains an array of objects that passes the selected (pressed) one direct child component to it. This displays the data in more detail. I use the "SimpleChanges" function to view in this child component if the given object has changed to make another HTTP request to get related comments from the database.

If I try to build it using npm, I get an error:

app / displayEntry.component.ts (23,41): error TS2339: property 'entry' does not exist in type 'SimpleChanges'

If I just comment on this part, start npm and finally return it there and save, there is no more problem (there is no erro and it works). My question is, is there a way around this behavior, and can it cause any problems later, I do not foresee or should not just ignore it? Thanks for your help.

Parent component:

import { Component, OnInit } from '@angular/core'; import { entry } from './Objekte/entry'; import { entryService } from './entry.service' @Component({ templateUrl: 'app/Html_Templates/displayLastEntrys.template.html' }) export class displayLastEntrys implements OnInit{ public entrys : entry[]; private entryChoosen: boolean; private ChoosenEntry : entry; constructor ( private entryservice : entryService){ this.entryChoosen = false; } ngOnInit() : void { this.getData(); } getData() { this.entryservice.getFirstEntrys().then(entrys => this.entrys = entrys); } entryClicked(ent: entry){ this.entryChoosen = true; this.ChoosenEntry = ent; } leaveEntry () { this.entryChoosen = false; } voted( upordown : boolean ) { } }

Children's component:

 import { Component, Input, Injectable, OnChanges , SimpleChanges, Output, EventEmitter} from '@angular/core'; import { entry} from './Objekte/entry'; import { entryService } from './entry.service'; import { comment } from './Objekte/comments'; @Component({ selector: 'display-entry', templateUrl: 'app/Html_Templates/displayEntry.template.html' }) export class displayComponent implements OnChanges{ @Input() public entry : entry; public comments : comment[]; private changecounter : number; constructor(private service : entryService) { this.changecounter = 0; } ngOnChanges(changes : SimpleChanges){ this.service.getComments(changes.entry.currentValue.id) .then(com => this.comments = com ) .catch(); this.entry.viewed++; // To implement :: change database } votedUp () : void { this.entry.votes ++; // To implement :: change database } votedDown () : void { this.entry.votes --; // To implement :: change database } }
+6
source share
2 answers

To prevent the compiler from complaining, simply change the method definition for the one parameter from SimpleChanges to any :

 ngOnChanges(changes: any) { //...
+2
source

The decision made is suboptimal for TypeScript, since you are defeating the type system.

SimpleChanges does not have the entry property, so the compiler absolutely correctly refuses. The solution is to treat the changes object as an array:

 ngOnChanges(changes : SimpleChanges){ if (changes['entry']) { this.service.getComments(changes['entry'].currentValue.id) } }

Then you can keep typing the ngOnChanges method heavily.

+8
source

More articles:


All Articles