如何等待发布方法完成Angular

时间:2020-05-26 22:33:44

标签: javascript angular typescript rxjs

我正在使用知识测试系统,因此作为管理员,我可以创建测试。 在创建测试的页面上,首先输入有关测试和问题计数的信息。 然后,对于每个问题,我都输入该问题的答案计数以及有关该问题的信息。 然后为每个答案输入一些信息,然后单击“提交”按钮。

动作顺序必须如下:

发布测试->发布第一个问题->发布第一个问题的答案->发布第二个问题,等等。

所以我需要等到创建第一个问题,然后为该问题创建每个答案,然后再为其创建第二个问题和答案。

顺序非常重要,必须像我写的那样。

但是我有一个错误,因为我的post方法异步工作,所以我的订单无法正常运行。

例如,如果我创建2个问题,并为每个问题创建2个答案,我的订单就会变成:

测试完毕->问题2已完成->问题1已完成->所有答案均已完成

所以我需要知道,如何等到post方法完成。

这是我为他们发布问题和答案的方法:

for(let item of this.sas){// sas is type Map<Question, Answer[]>
      // get question info
      let q = document.getElementById(`q_${ii+1}`) as HTMLInputElement;
      let t = document.getElementById(`t_${ii+1}`) as HTMLInputElement;
      let isSin = true;
      if(t.checked){
        isSin = false;
      }
      let question = new Question();
      question.Content = q.value;
      question.IsSingle = isSin;
      //

      // get answers for this question
      let answers = [];
      for(let j of item[1]){
        let isCorrect = document.getElementById(`a_isCorrect_${ii}:${j}`) as unknown as HTMLInputElement;
        let content = document.getElementById(`a_content_${ii}:${j}`) as unknown as HTMLInputElement;
        let mark =  document.getElementById(`a_mark_${ii}:${j}`) as unknown as HTMLInputElement;

        let answer = new Answer();
        answer.IsCorrect = isCorrect.checked;
        answer.Content = content.value;
        answer.Mark = Number(mark.value);
        answers.push(answer);
        j++;
      }

      //post question
      this.questionService.createQuestion(question).subscribe(data=> {
        console.log(`question ${question.Content} done`);
      //

         //post answers for question
           from(answers).pipe(
             map(answer => this.answerService.createAnswer(answer).subscribe(data => { 
                          console.log(`answer ${answer} done` ) } ) )
           ).subscribe(s=> { console.log("done")});
      //
      });
      ii++;
    };
  }

3 个答案:

答案 0 :(得分:1)

我相信您最好的选择,只要您不需要发布公告,就可以像这样递归:

function handleQuestion(item, index = 0) {
let q = document.getElementById(`q_${index+1}`) as HTMLInputElement;
let t = document.getElementById(`t_${index+1}`) as HTMLInputElement;
let isSin = true;
if(t.checked){
    isSin = false;
}
let question = new Question();
question.Content = q.value;
question.IsSingle = isSin;

let answers = [];
for(let j of item){
    let isCorrect = document.getElementById(`a_isCorrect_${index}:${j}`) as unknown as HTMLInputElement;
    let content = document.getElementById(`a_content_${index}:${j}`) as unknown as HTMLInputElement;
    let mark =  document.getElementById(`a_mark_${index}:${j}`) as unknown as HTMLInputElement;

    let answer = new Answer();
    answer.IsCorrect = isCorrect.checked;
    answer.Content = content.value;
    answer.Mark = Number(mark.value);
    answers.push(answer);
    j++;
}

this.questionService.createQuestion(question).subscribe(data=> {
    from(answers).pipe(
    map(answer => this.answerService.createAnswer(answer).subscribe(data => { 
        console.log(`answer ${answer} done` ) } ) )
    ).subscribe(s=> {
        index++;
        if (this.sas[index]) {
            handleQuestion(this.sas[index], index);
        }
    });
}); }

答案 1 :(得分:1)

您可以合并两个可观察对象...以在两个对象都已响应时获得响应数据。

fetchData(): Observable<any[]> {
    return combineLatest(
        this.observable1$(),
        this.observable2$()
    );
}

答案 2 :(得分:1)

您需要在此处使用function SimulationReport() { return ( <Table> <thead> <th>Team Name</th> <th>Win Probability</th> </thead> <tbody> {simulationResult .find(t => t.originatingRequest.markets.name === "Winner") .selections.map(selection => ( <tr key=""> <td>{selection.name}</td> <td>{selection.probability}</td> </tr> ))} </tbody> </Table> ); } ,它会逐步等待每次发射。

TypeError: _api_model_simulationResult__WEBPACK_IMPORTED_MODULE_2__.find is not a function

如果您想要整个东西:

concatMap