Question

我正在从firebase数据库中读取数据，并根据收到的数据创建一些对象并将数据推送到列表中。但是，在创建对象或将对象推入列表之前，控件将返回到组件。我很困惑在这种方法中使用任何生命周期钩子。

Class Service(){

questions: QuestionsData<any>[]=[];

getQuestions(FormKey: string) {

var dbQuestions = this.af.list('/elements', {
   query: {
  limitToLast: 200,
  orderByChild: 'formid',
  equalTo: FormKey
 }
})

  dbQuestions.subscribe(snapshots=>{
  snapshots.forEach(elementData => {
  this.questions.push(new TextboxQuestion({
    key: elementData.elementname,
    label: elementData.displaytext,
    value: elementData.elementvalue,
    required: false,
    order: elementData.sortorder
  }))
 }
}
}

任何人都可以建议如何在我的组件中使用这些数据。

Answer 1

正如JB Nizet在评论中所提到的那样，你不应该subscribe对观察者进行TextBoxQuestion并在你正在进行的模板中打开它。 Angular提供async管道来为您处理该订阅。您只想将数据映射到class MyComponent { questions$: QuestionsData<any>[]=[]; getQuestions(FormKey: string) { const dbQuestions$ = this.af.list('/elements', { query: { limitToLast: 200, orderByChild: 'formid', equalTo: FormKey } }); this.questions$ = dbQuestions$.map(snapshots => snapshots.map(data => new TextBoxQuestion({ key: data.elementname, // and so on... }); } }。您可以使用以下代码执行此操作。

OnInit

如果要在组件初始化时运行它，请使用ngOnInit() { this.getQuestions(/* form key */); }生命周期钩子：

async

然后在模板中使用<ul> <li *ngFor="let question of questions$ | async"> {{ question.key }} </li> </ul>管道，如下所示：

Ticket

Answer 2

您的服务应该或多或少是这样的：

import 'rxjs/add/operator/map'

Class Service() {

    getQuestions(FormKey: string): Observable<QuestionsData<any>[]>  {

        return dbQuestions = this.af.list('/elements', {
            query: {
                limitToLast: 200,
                orderByChild: 'formid',
                equalTo: FormKey
            }
        }).map(snapshots=>{
            conts questions: QuestionsData<any>[]=[];

            snapshots.forEach(elementData => {
                questions.push(new TextboxQuestion({
                    key: elementData.elementname,
                    label: elementData.displaytext,
                    value: elementData.elementvalue,
                    required: false,
                    order: elementData.sortorder
                }))
            })

            return questions;
        })
    }
}

在组件：

中

serviceInstance.getQuestions(FormKey).subscribe(questions => {
    // your code here
})

将数据从服务传递到角度组件

2 个答案: