类型错误：无法读取未定义的属性"容量"

Question

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

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

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;。因此出现了未定义的异常。