2016-09-29 7 views
6

В моем приложении с угловым 2 есть компонент, содержащий массив объектов, который передает выбранный (нажатый) один к его прямому дочернему компоненту. Это отображает данные более подробно. Я использую функцию «SimpleChanges» для просмотра в этом дочернем компоненте, если заданный объект изменился, чтобы сделать другой HTTP-запрос для получения связанных комментариев из базы данных.Угловой 2 SimpleChanges Объект вызывает ошибку при первом запуске npm

Если я пытаюсь построить его с НПМ я получаю сообщение об ошибке, говоря:

приложение/displayEntry.component.ts (23,41): ошибка TS2339: свойство «запись» не существует на типе 'SimpleChanges'

Если я просто прокомментирую эту часть, запустите npm и, наконец, положите ее туда и сохраните, больше нет проблемы (нет erro, и она работает). Мой вопрос в том, есть ли способ обойти это поведение, и может ли это вызвать какие-либо проблемы позже, я не предвижу или не должен просто игнорировать его? Спасибо за вашу помощь

Родитель компонент:

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) { 

} 
} 

Детский компонент:

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 
} 
} 

ответ

2

Для того, чтобы компилятор не жалуюсь просто изменить определение метода для параметра одного из SimpleChanges в any:

ngOnChanges(changes: any) { 

//... 
8

Принятое решение является субоптимальным для типа Скрипт, поскольку вы побеждаете систему типов.

SimpleChanges не имеет свойства entry, поэтому компилятор совершенно правильно отказывается. Решение состоит в том, чтобы рассматривать changes объект как массив:

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

Тогда вы можете продолжать сильно ввести метод ngOnChanges.

+1

И лучше проверить, есть ли в текущих изменениях изменения в поле ввода. Например, с 'if ('entry' in changes)'. – PhoneixS

+0

Этот ответ должен быть принят. –

+0

@PhoneixS - Хорошая точка, хорошо сделано. Я скорректировал ответ. – superluminary

Смежные вопросы