ngModel binding data angular 4

Question

I have a response json data like this:

{
  "trainingClassId": 22,
  "classId": "class001",
  "startDate": 1541178000000,
  "endDate": 1510333200000,
  "examDate": 1510333200000,
  "numOfAttendee": "15"
}

on service:

getDetailApp(id: number):  Promise<any[]> {
    const url = `${this.URL}/${id}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json())
      .catch(this.handleError);
  }

on ts file:

ngOnInit() {

    this.getAppDetail();
    };

     async getAppDetail(){
       await this.appService.getDetailApp(this.data.id).then(data =>this.sub = data);

      console.log("=="+this.sub.classId);
    } 

in html file:

 <mat-form-field>
                <input matInput [(ngModel)]="sub.classId" name="classId" id="classId" placeholder="Class ID">

            </mat-form-field>

when init html page, the input classID show data well. but in console browser it shows error message:

 ERROR TypeError: Cannot read property 'classId' of undefined
    at Object.eval [as updateDirectives]

after that, the page is crash. I cannot do anything on this. Please advice me.