Angularfire无法读取属性' push'为null

时间:2017-07-29 03:16:33

标签: javascript angular firebase angularfire2

我试图在数据库中创建一个新对象进行评估,现在它的硬编码只是尝试让它工作,但从视图中看是动态的。我目前收到错误无法读取属性'推送' null,这让我相信评估对象没有被正确传回?或者它是否与firebase没有等待接收它的对象有关?

我在其他地方使用的字面上重复的代码,这些代码对我做错了什么不太敏感!

模型

export class AssessmentItem {
  $key: string;
  first: string;
  second: string;
  third: string;
  education: number;
  employment: number;
  health: number;
  social: number;
  civic: number;
  housing: number;
}

服务

  assessmentItems: FirebaseListObservable<AssessmentItem[]> = null;
  assessmentItem: FirebaseObjectObservable<AssessmentItem> = null;

  constructor(private db: AngularFireDatabase,
              private  afAuth: AngularFireAuth) {
    // setting userId returned from auth state to the userId on the service, now we can query
    // currently logged in user, using the id. IMPORTANT
    this.afAuth.authState.subscribe(user => {
      if(user) this.userId = user.uid
    })
  }

createAssessmentItem(assessmentItem: AssessmentItem) {
     this.assessmentItems.push(assessmentItem)
       .catch(error => this.handleError(error))
   }

ts文件

   assessments: FirebaseListObservable<AssessmentItem[]>;

  assessment: AssessmentItem = new AssessmentItem;

  constructor(private visionService: VisionService,
              public auth: AuthService) { }

  ngOnInit() {
    //this.assessments = this.visionService.getAssessment();
  }
 test() {
    this.assessment.first = "test";
    this.assessment.second = "test";
    this.assessment.third = "test";
    this.assessment.education = 1;
    this.assessment.civic = 1;
    this.assessment.employment = 1;
    this.assessment.health = 1;
    this.assessment.housing = 1;
    this.assessment.social = 1;
    this.visionService.createAssessmentItem(this.assessment)
    console.log(this.assessment);
  }

视图如何使用

<md-card-content>
    <p>List 3 things that they did that you think helped them become successful:</p>
    <md-input-container>
      <textarea mdInput
                placeholder="First"
                [(ngModel)]="assessment.first"
                (ngModelChange)="assessment.first"></textarea>
    </md-input-container>
    <md-input-container>
      <textarea mdInput
                placeholder="Second"
                [value]="assessment.second"
                [ngModel]="assessment.second"
                (ngModelChange)="assessment.second"></textarea>
    </md-input-container>
    <md-input-container>
      <textarea mdInput
                placeholder="Third"
                [value]="assessment.third"
                [ngModel]="assessment.third"
                (ngModelChange)="assessment.third">></textarea>
    </md-input-container>
  </md-card-content>
</md-card>


<md-card class="result">
  <md-card-content>
    <p>Education</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="0"
      [ngModel]="assessment.education"
      (ngModelChange)="assessment.education">
    </md-slider>
    <p>Employment</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="0"
      [ngModel]="assessment.employment"
      (ngModelChange)="assessment.employment">
    </md-slider>
    <p>Health and Wellbeing</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="step - 1"
      [ngModel]="assessment.health"
      (ngModelChange)="assessment.health">
    </md-slider>
    <p>Social Connections</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="step - 1"
      [ngModel]="assessment.social"
      (ngModelChange)="assessment.social">
    </md-slider>
    <p>Civic Participation</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="step - 1"
      [ngModel]="assessment.civic"
      (ngModelChange)="assessment.civic">
    </md-slider>
    <p>Housing and Living Skills</p>
    <md-slider
      [min]="min"
      [max]="max"
      [step]="step"
      [thumb-label]="thumbLabel"
      [tick-interval]="tickInterval"
      [value]="step - 1"
      [ngModel]="assessment.housing"
      (ngModelChange)="assessment.housing">
    </md-slider>
  </md-card-content>
</md-card>
<button md-raised-button (click)="test()">test button</button>

1 个答案:

答案 0 :(得分:1)

在您的服务中,您不会为assessmentItemsassessmentItems创建实例,因此他们会null - 他们所拥有的价值初始化。

您需要调用注入list的{​​{1}}方法为db创建实例:

assessmentItems

您还需要为constructor( private db: AngularFireDatabase, private afAuth: AngularFireAuth) { this.assessmentItems = db.list('some/path/some/key'); } 创建一个实例,但不清楚该代码段打算如何(或在何处)使用它。