将数据从服务传递到 angular 个组件

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 observable 并将其解包到您的模板中，就像您目前所做的那样。 Angular 提供 async 管道来为您处理该订阅。您只想将数据映射到 TextBoxQuestion。您可以使用以下代码执行此操作。

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>

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
})

将数据从服务传递到 angular 个组件

Passing data from service to angular components

rxjs

angularjs

angular

angular4-forms