Angular 5 TypeError: this.tipp.isPersistent is not a function

angular typescript2.0

50 观看

3回复

43 作者的声誉

Don't what the problem is. While logging to console the following error is displayed:

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

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

The first log statement is displayed correctly. But it seems to be a problem to evaluate 'this.tipp.isPersistent()':

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

Called by following template snippet:

<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>
作者: user1350889 的来源 发布者: 2017 年 12 月 27 日

回应 3


0

142712 作者的声誉

You should just call this.isPersistent()

 console.log("Tipp-isPersistent: " + this.isPersistent());
作者: Sajeetharan 发布者: 2017 年 12 月 27 日

2

9197 作者的声誉

It looks like you are creating an object with the properties of Tipp instead of creating a new instance of Tipp. This means your object has the properties of Tipp, but not the methods.

So in your parent component that passes tipp into TippEingabeComponent you should be creating a new instance of Tipp.

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

This means you'll have to update your Tipp class to accept parameters

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

Now when your TippEngabeComponent calls the method isPersistent it will exist on tipp because tipp is an instance of the class Tipp.

作者: LLai 发布者: 2017 年 12 月 27 日

0

43 作者的声誉

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());
}

Put in some more debug info reults into:

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

As the log output says the tipp is not an instance of class Tipp. But why not? The data is delivered as part of an quit complex json tree from a backend service. I thought that the instantiation of the embedded leafes/nodes of the tree is handled by angular?

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

Is it wrong to assume, that the embedded 'tipps' delivered by a data service in json are instantiated as 'Tipp' types as declared in 'Spiel' class definition?

{
  "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"
    }
  ]
}
作者: user1350889 发布者: 2017 年 12 月 27 日
32x32