2017-07-29 59 views
0

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

我从字面上重复了我在其他地方使用过的代码,它的工作原理很不确定,因为我做错了什么!

模型

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

在您的服务中,您不会为assessmentItemsassessmentItems创建实例,因此它们是null - 它们已初始化的值。

你需要调用注入dblist方法为assessmentItems创建一个实例:

constructor(
    private db: AngularFireDatabase, 
    private afAuth: AngularFireAuth) { 

    this.assessmentItems = db.list('some/path/some/key'); 
} 

您还需要为assessmentItem创建一个实例,但它不是明确的片断如何(或在)你打算使用它。

+0

真棒,这是有道理的,我打算在附加到该ts文件的视图中使用它,我现在将它添加。我真正需要帮助理解的另一个问题是从单个项目获取属性,例如模型在这里。 – theHussle