Typescript

Question

我正在尝试从 AngularFireDatabase.object() 调用的 Observable 结果中提取数据，并将其设置为一个属性，以便稍后在其他范围内使用它。

export class QuizzEditComponent implements OnInit {
  private quizzRef: any;
  private quizzObject: any;
  private key: string;

  constructor(private router: ActivatedRoute, private database: AngularFireDatabase) {
    this.key = this.router.snapshot.paramMap.get('id');
    this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key);
    this.quizzRef.valueChanges().forEach(line => {
      this.quizzObject = line;
      console.log(this.quizzObject); // this display the wanted object
    });
    console.log(this.quizzObject); // This display undefined
  }
}

我尝试了不同的迭代，例如 for let line of this.quizzItem 不起作用，因为 Observable 是一个对象！

任何想法！

Answer 1

这只是一个与您如何在组件内设置数据有关的问题。从您的代码中，如果您希望获得可观察对象的最后一个元素，一种方法是在设置变量后调用一个函数。这样，您可以确保您的变量 this.quizzObject 在您调用的函数中没有未定义。

export class QuizzEditComponent implements OnInit {
  private quizzRef: any;
  private quizzObject: any;
  private key: string;

  constructor(private router: ActivatedRoute, private database: AngularFireDatabase) {
    this.key = this.router.snapshot.paramMap.get('id');
    this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key);
    this.quizzRef.valueChanges().forEach(line => {
      this.quizzObject = line;
      console.log(this.quizzObject); // this display the wanted object
      this.myFunction()
    });

    myFunction(){
      //do all the computation here to the last element return by the observable
      console.log(this.quizzObject); 
    }

  }
}

Answer 2

使用push这样存储数据

private quizzObject=[];

而不是 this.quizzObject = line; 试试 this.quizzObject.push(line);

Answer 3

谢谢大家，this.quizzObject 过了一会儿就填满了（Async Scope），这就是为什么第二个 console.log() 显示未定义。

解决方法是用空数据初始化this.quizzObject，然后创建一个formBuilder，然后使用(ngModel)管理到模板中。

组件：

init(){
  this.key = this.router.snapshot.paramMap.get('id');
  this.initObject();
  this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key);
  this.quizzItem = this.quizzRef.valueChanges().subscribe(item => {
    this.quizzObject = item;
  });
}

initObject(){
  this.quizzObject = [];
  this.quizzObject.question = "";
  this.quizzObject.reponses = [{1: "", 2: "", 3: "", "correctAnswer": ""}];

  this.quizzForm = this.formBuilder.group({
    question: [this.quizzObject.question, Validators.required],
    reponses: this.formBuilder.group({
      1: this.quizzObject.reponses[1],
      2: this.quizzObject.reponses[2],
      3: this.quizzObject.reponses[3],
      correctAnswer: this.quizzObject.reponses.correctAnswer
    }),
  });
}

模板：

<form [formGroup]="quizzForm" (ngSubmit)="onSubmit()" role="form">
              <div class="form-group has-success">
              <div class="card bg-light mb-3">

                  <div class="card-header">

                    <label class="form-control-label" for="question">Question</label>

                </div>
                <div class="card-body">
                    <input formControlName="question" type="text" class="form-control form-control-success" id="inputSuccess" [(ngModel)]="quizzObject.question" required>
                </div>
              </div>
        </div>

这不是最好的方法，但它解决了我的问题 (y)

Typescript - 将 Observable 中的数据设置为属性

Typescript - set data from Observable to an attribute

observable

angularfire2

angular5