ionic 3 Error after adding data to firebase - html

Question

Just tried making a Training plans page where the user can add his own plans .
tried using firebase but it doesnt work really well..
After I made my first plan and enter the contirbutes of name and the exercise type (Muscle) it just threw me out and showed me that :
I get this ERROR:
ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer] (Plans.html:17)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14376)
at checkAndUpdateView (core.js:13512)
at callViewAction (core.js:13857)
at execEmbeddedViewsAction (core.js:13815)
at checkAndUpdateView (core.js:13508)
at callViewAction (core.js:13857)
at execComponentViewsAction (core.js:13789)
at checkAndUpdateView (core.js:13513)
at callViewAction (core.js:13857)
here is the code by parts:
Plans.ts who supposed to the the data from the firebase and show it on the screen:
import { Plan } from './../../models/plan/plan.model';
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { PlansListService } from './../../services/plans/plans-list.service';
import { Observable } from 'rxjs/Observable';
#IonicPage()
#Component({
selector: 'page-plans',
templateUrl: 'plans.html'
})
export class Plans {
planslist$: Observable<Plan[]>;
constructor(public navCtrl: NavController, public navParams: NavParams,
private plans: PlansListService) {
this.planslist$ = this.plans
.getPlansList()
.snapshotChanges()
.map(
changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val()
}))
}
)
}
}
Here is the Plans.html:
<ion-header>
<ion-navbar >
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Training plans</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-list-header>
Your Plans
</ion-list-header>
<div ion-item *ngFor="let plan of planslist$ | async">{{Plan.name}} </div>
</ion-list>
<ion-fab color="fab" bottom right class="fabPalcement">
<button ion-fab color="fab" navPush='AddPlan'>
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
addplan.ts that supposed to take the data to the firebase by attaching the name and muscles to the
'name' and 'muscles' variables that I made on the model:
import { PlansListService } from './../../services/plans/plans-list.service';
import { Plan } from './../../models/plan/plan.model';
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-addplan',
templateUrl: 'addplan.html',
})
export class AddPlan {
constructor(public navCtrl: NavController, public navParams: NavParams,
private plans: PlansListService) {
}
Plan: Plan = {
name: ' ',
muscles: ' ',
}
addNewPlan(plan: Plan){
this.plans.addNewPlan(plan).then(ref => {
this.navCtrl.setRoot('Plans', {key : ref.key})
})
}
}
addplan.html:
<ion-header>
<ion-navbar>
<ion-title>הוסף תוכנית אימונים</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding dir = "rtl">
<ion-item>
<ion-label>שם התוכנית</ion-label>
<ion-input [(ngModel)]="Plan.name" placeholder="התוכנית שלי" item-end></ion-input>
</ion-item>
<ion-item>
<ion-label>קבוצת שרירים</ion-label>
<ion-select [(ngModel)]="Plan.muscles">
<ion-option value="c">חזה</ion-option>
</ion-select>
</ion-item>
<button ion-button (click)="addNewPlan(Plan)">הוסף</button>
</ion-content>
What can I do? where is the problem?? :(