在使用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
})
我希望使用接口加载数据