角5タイプエラー：this.tipp.isPersistentは関数ではありません

Question

問題はありません。

"Tipp: { 
"id":1, 
{...} 
} 

ERROR TypeError: this.tipp.isPersistent is not a function" is shown. 

最初のログステートメントが正しく表示されます。次のエラーが表示されたコンソールにログイン中。次のテンプレートスニペットによって呼び出され

@Component({ 
    selector: 'tipp-eingabe', 
    templateUrl: './tipp-eingabe.component.html', 
    styleUrls: ['./tipp-eingabe.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class TippEingabeComponent implements OnChanges { 
    @Input() tipp: Tipp;  
    constructor() { 
    } 

    ngOnChanges(changes) { 
    console.log("Tipp: " + JSON.stringify(this.tipp)); 
    console.log("Tipp-isPersistent: " + this.tipp.isPersistent()); 
    } 
} 

export class Tipp { 
    id: number; 
    spieler: Spieler; 
    spiel: Spiel; 
    tippErgebnis: Spielstand; 
    aenderungsDatum: Date; 

    public isPersistent(): boolean { 
    return true; 
    }; 
} 

は：

<div class="panel panel-default"> 
    <div class="panel panel-body"> 
    <div *ngFor="let spiel of spiele"> 
     <div *ngIf="!isMatchCollapsed(spiel.id)"> 
     <div *ngFor="let tipp of spiel.tipps" class="tippLine"> 
      <tipp-eingabe [tipp]="tipp"></tipp-eingabe> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなただけthis.isPersistent()

を呼び出す必要がありますが、 ' this.tipp.isPersistent（）' を評価するために、問題になるようです

console.log("Tipp-isPersistent: " + this.isPersistent()); 

Answer 2

プロパティを持つオブジェクトを作成しているようです。Tippの新しいインスタンスを作成する代わりに、Tippという新しいインスタンスを作成します。つまり、オブジェクトにはTippのプロパティがありますが、メソッドはありません。

tippをTippEingabeComponentに渡す親コンポーネントでは、Tippの新しいインスタンスを作成する必要があります。

let tipp = new Tipp(// pass in params); 

これはあなたのTippEngabeComponentはティップがクラスティップのインスタンスであるので、それはティップに存在しますisPersistentメソッドを呼び出したときに、あなたが今、パラメータ

export class Tipp { 
    id: number; 
    spieler: Spieler; 
    spiel: Spiel; 
    tippErgebnis: Spielstand; 
    aenderungsDatum: Date; 

    constructor(obj: { 
     id: number; 
     spieler: Spieler; 
     spiel: Spiel; 
     tippErgebnis: Spielstand; 
     aenderungsDatum: Date; 
    }){ 
     this.id = obj.id; 
     this.spieler = obj.spieler; 
     this.spiel = obj.spiel; 
     this.tippErgebnis = obj.tippErgebnis; 
     this.aenderungsDatu = obj.aenderungsDatum; 
    } 

    public isPersistent(): boolean { 
     return true; 
    }; 
} 

を受け入れるようにティップクラスを更新する必要があります意味。ログ出力は、ティップがクラスティップのインスタンスではありません言うように

Tipp changed: {"id":1, ..... } 
this.tipp instanceof Tipp: false 
ERROR TypeError: this.tipp.isPersistent is not a function 

：いくつかのより多くのデバッグ情報に入れ

Answer 3

ngOnChanges(changes) { 
    console.log("Tipp changed: " + JSON.stringify(this.tipp)); 
    console.log("this.tipp instanceof Tipp: " + (this.tipp instanceof Tipp)); 
    console.log("Tipp wurde geändert: " + this.tipp.isPersistent()); 
} 

はにreults。しかし、どうしてですか？ データは、バックエンドサービスから終了する複合Jsonツリーの一部として配信されます。私は、ツリーの埋め込みリーフ/ノードのインスタンス化は角度で処理されると考えましたか？

export class Spiel { 
    id: number; 
    : 
    tipps: Tipp[]; 
} 

それが熱弁「クラス定義で宣言されたJSONでデータサービスが提供する埋め込まれた「ティップスは」「ティップ」タイプとしてインスタンス化されることを想定して間違ってますか？

{ 
    "id": 1, 
    "tipps": [ 
    { 
     "id": 1, 
     "spieler": { 
     "id": 2, 
     "spielerName": "Stumbe", 
     "email": "petrajautz@gmx.de", 
     "rolle": "Spieler" 
     }, 
     "tippErgebnis": { 
     "toreTeam1": 1, 
     "toreTeam2": 2 
     }, 
     "aenderungsDatum": "2017-12-27T10:08:15" 
    }, 
    { 
     "id": 2, 
     "spieler": { 
     "id": 3, 
     "spielerName": "Aug", 
     "email": "auge.sumser@gmx.de", 
     "rolle": "Admin" 
     }, 
     "tippErgebnis": { 
     "toreTeam1": 1, 
     "toreTeam2": 1 
     }, 
     "aenderungsDatum": "2017-12-27T10:08:15" 
    } 
    ] 
}