Angular2 FormBuilder和嵌套的對象屬性返回undefined

我只是用TypeScript和Angular2弄溼我的腳。我正在使用具有嵌套對象結構的API。我希望我的模型能夠從API中鏡像資源。該模型/資源，「查詢」，如打字稿定義：Angular2 FormBuilder和嵌套的對象屬性返回undefined

// inquiry.ts 
export class Inquiry { 
    name: { 
    first: string, 
    last: string 
    }; 
    email: string; 
    phone: string; 
    question: string; 
}

我的表單組件是這樣的：

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { InquireService } from './inquire.service'; 
import { Inquiry } from './inquiry'; 

@Component({ 
    selector: 'inquire-form', 
    templateUrl: './inquire-form.component.html' 
}) 
export class InquireFormComponent implements OnInit { 
    inquiryForm: FormGroup; 
    inquiry = new Inquiry; 

    constructor(
    private formBuilder: FormBuilder, 
    private inquireService: InquireService) {} 

    ngOnInit(): void { 
    this.buildForm(); 
    } 

    buildForm(): void { 
    this.inquiryForm = this.formBuilder.group({ 
     'firstName': [ 
     this.inquiry.name.first, [ 
      Validators.required, 
      Validators.minLength(2), 
      Validators.maxLength(50) 
     ] 
     ], ... 
    } 
}

我得到時，我打我的路線錯誤是：

Error: Uncaught (in promise): TypeError: Cannot read property 'first' of undefined

當我登錄this.inquiry.name確實undefined，但我不明白爲什麼。我究竟做錯了什麼？

來源

2016-09-16 Brandon

你只是說明了'name'屬性的類型簽名是什麼，但實際上並沒有初始化zed它。 –

嗯。當我創建新的查詢實例（在構造函數之上）時，它沒有初始化嗎？ – Brandon

據我所知，你只是宣稱一個Inquiry對象包含4個屬性，一個名字爲'{first：string，last：string}'和'email'，'phone'和'question'字符串類型。沒有一個屬性被明確地初始化，所以它們只有它們的默認值（'undefined'）。 –

問題是您的Inquiry對象上的任何屬性都未初始化，因此它們都是默認值undefined。由於name不重新初始化，嘗試訪問其任何屬性（first或last）將失敗。

將它設置在一個構造函數：

constructor() { 
    this.name = {} as any; // too lazy to give first/last properties 
}

或在聲明中初始化：

class Inquiry { 
    name = {} as { 
     first: string, 
     last: string 
    }; 
    email: string; 
    phone: string; 
    question: string; 
}

，或者如果你想明確地保留類型的聲明，而不是依靠類型推斷：

class Inquiry { 
    name: { 
     first: string, 
     last: string 
    } = {} as any; 
    email: string; 
    phone: string; 
    question: string; 
}

來源

2016-09-16 23:50:06

啊。第二個例子更有意義。只要我回到我的電腦，我會盡力嘗試。非常感謝你的幫助。 – Brandon

我實現了第二個例子，並且我的formBuilder再次運行。謝謝！顯然我需要刷上我的TypeScript。 – Brandon

我不會說這是一個打字稿，只是一般的面向對象。這裏的區別是你描述的是一個對象的模式，而不是給它一個明確的名字。您將變量/屬性聲明爲具有某些屬性的對象。但是您仍然需要像Java或C＃中那樣初始化該變量以獲得某個值。 –

Angular2 FormBuilder和嵌套的對象屬性返回undefined

回答

相關問題