TypeError:无法读取未定义的属性“capacity”

Question

在使用Interface之前，它运行得很流畅。然后，我在我的TS代码中实现了接口，并面临问题。我不知道我错过了什么。

创建接口，然后使用接口的对象进行应用。

Html文件

​

<ion-content class="ion-padding">
  <ion-item>
    <ion-label position="floating">Class Code</ion-label>
    <ion-input type="text" [(ngModel)]="code"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Class Name</ion-label>
    <ion-input type="text" [(ngModel)]="name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Instructor Name</ion-label>
    <ion-input type="text" [(ngModel)]="instructor"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Class Capacity</ion-label>
    <ion-input type="number" [(ngModel)]="capacity"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Location</ion-label>
    <ion-input type="text" [(ngModel)]="location"></ion-input>
  </ion-item>
  <div>
    <p>
      <ion-button color="success" expand="block" (click)="btnSubmit()" size="small" [disabled]="!code || !name || !instructor || !capacity || !location ">Submit</ion-button>
    </p>
    <ion-button color="danger" expand="block" (click)="btnCancel()" size="small">Cancel</ion-button>
  </div>
</ion-content>

​

Ts文件

export class AddcoursePage implements OnInit {
      private classData: ClassDescription;
      constructor(public navCtrl: NavController,
                  public firestore: AngularFirestore,
                  public toastCtrl: ToastController) {}


async btnSubmit() {
   this.classData.remaining = this.classData.capacity;
    const res =             
    this.firestore.collection('/class').doc(this.classData.code).set({
    Code: this.classData.code,
    Name: this.classData.name,
    Instructor: this.classData.instructor,
    Capacity: this.classData.capacity,
    Location: this.classData.location,
    Remaining: this.classData.remaining,
    Register: false
  })

我希望使用接口加载数据

Answer 1

看起来this.classData在btnSubmit()的第一行是undefined

在你的代码中没有初始化private classData: ClassDescription;。因此出现了未定义的异常。