2017-07-29 119 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