angular.io指南中的動態窗體示例的異步版本

我試圖獲取https://angular.io/guide/dynamic-form中的動態窗體示例，該示例處理從我設置的Django API返回的元數據。angular.io指南中的動態窗體示例的異步版本

Django的API（從文檔生成的一個拷貝）是不是現在可在網上，所以我假裝在應用程序的API調用/ question.service.ts這樣的：

getQuestions(): Promise<QuestionBase[]> { 
    return new Promise(resolve => { 
     // Simulate server latency with 2 second delay 
     setTimeout(() => resolve(this.getQuestionsOriginal()), 2000); 
    }); 
}

this.getQuestionsOriginal（）只是返回的問題一個數組，如：

QuestionBase<any>[] = [ 
    new DropdownQuestion({ 
    key: 'brave', 
    label: 'Bravery Rating', 
    options: [ 
     {key: 'solid', value: 'Solid'}, 
     {key: 'great', value: 'Great'}, 
     {key: 'good', value: 'Good'}, 
     {key: 'unproven', value: 'Unproven'} 
    ], 
    order: 3 
    }), 
    new TextboxQuestion({ 
    key: 'firstName', 
    label: 'First name', 
    value: 'Bombasto', 
    required: true, 
    order: 1 
    }), 
    new TextboxQuestion({ 
    key: 'emailAddress', 
    label: 'Email', 
    type: 'email', 
    order: 2 
    }) 
];

然後在應用程序的構造函數/ app.component.ts我試圖找回問題並將它們分配到一個局部變量this.questions，這勢必爲模板是這樣的：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Job Application for Heroes</h2> 
     <dynamic-form [questions]="questions"></dynamic-form> 
    </div> 
    `, 
    providers: [QuestionService] 
}) 
export class AppComponent implements OnInit { 
    questions = Array(); 

    constructor(private service: QuestionService) { 
    this.service.getQuestions((questions) => { 
     this.questions = questions; 
    }); 
    } 
}

但是，這並不工作 - 它提供了一個錯誤「無法讀取屬性未定義的‘有效’」，這表明this.questions沒有得到填充（因爲表單正在檢查有效的表單元素）。事實上，如果我添加一個ngOnInit和console.log（this.questions），我可以看到它是空的。我如何填充this.questions？我也嘗試運行this.service.getQuestions（（questions）=> {this.questions = questions;}）;在ngOnInit中，具有相同的結果。如何解決承諾時更新約束問題？

我在stackoverflow上發現了一個類似的問題，這個問題沒有解決Setting Values From API for Angular 2 Dynamic Form當用戶點擊一個按鈕來解決這個問題時，開發者最終生成了表單問題。不幸的是，這不是我的選擇。

來源

2017-08-07 rkian

一旦數據通過，您的questions實際上不是undefined。檢查這一個：How do I return the response from an Observable/http/async call in angular2?和接受的答案理解爲爲什麼在這裏未定義您console.log打印：

service.getQuestions().then(questions => this.questions = questions); 
console.log(this.questions);

但在您的實際問題。由於這是異步操作，因此需要一段時間才能完成響應。在那之前，角正試圖顯示模板。所以我們可以設置一個條件，DynamicFormComponent不會被顯示，直到questions被填充。所以在AppComponent做：

<dynamic-form *ngIf="questions" [questions]="questions"></dynamic-form>

這將解決您的問題！ :)

你的運動員：https://plnkr.co/edit/h2X1Ck?p=preview

來源

2017-08-09 14:25:56 Alex

angular.io指南中的動態窗體示例的異步版本

回答

相關問題