ngModel绑定数据角度4

Question

我有一个像这样的响应json数据：

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

服务：

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

ts文件上的

：

ngOnInit() {

    this.getAppDetail();
    };

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

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

在html文件中：

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

            </mat-form-field>

当init html页面时，输入classID显示数据很好。但在控制台浏览器中显示错误消息：

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

之后，页面崩溃了。我对此无能为力。 请指教我。