单选按钮中的 Angular-Handle 嵌套数组-解网

问：

我正在处理一个项目，我必须使用嵌套数组这是数据的虚拟版本

 options = [
   {
     value: 1,
     text: 'Cheeseburger',
     content: [
       { id: 101, name: 'Cheese' },
       { id: 102, name: 'Bread' },
       { id: 103, name: 'Veggies' },
     ],
   },
   {
     value: 2,
     text: 'Taco',
     content: [
       { id: 201, name: 'Nun' },
       { id: 202, name: 'Veggies' },
       { id: 203, name: 'Sauce' },
     ],
   },
 ];

使用它，我必须使用单选按钮制作 MCQ 风格的问答。虽然我能够设置问题和答案。我面临两个问题。

我有一个“添加更多”按钮，单击该按钮时会创建一个新的空问题和答案集（克隆“选项”）。但是在这样做时，即使我可以看到答案存储在数组中，先前选择的选项也会被取消选择。
我必须修补对此单选按钮的 API 响应。这是 API 响应的虚拟版本：

 res = [
      [102, 201],
      [101, 202],
    ];

我希望相应地选择选项，即在虚拟数据中有两个数组。然后在 UI 中，问题和答案应该有两个 two 集，并且要根据 contents 数组的 id 和 res 的 id 来选择选项。

对于 1，我做到了

  addMoreQuestions() {
    const existingQuestionSet = this.questionandAnswer[0].slice();
    console.log('existingQuestionSet =>', existingQuestionSet);

    this.questionandAnswer.push(existingQuestionSet);
    console.log('this.questionAnswer =>', this.questionandAnswer);

    // Copy the selected options for the previous question sets
    const previousSelectedOptions = [...this.selectedOptions];

    this.answers.push(previousSelectedOptions);
    console.log('answer =>', this.answers);

    // Reset selectedOptions only for the new question set
    this.selectedOptions = [];
  }

在这里，我看到在questionandAnswer中推送一个新数组，但是在这样做时，先前选择的选项被取消选择。但我可以在“this.answers”中看到它对于2，我想不出继续前进的方法。谁能帮忙？这是 stackblitz 链接

提前感谢您的帮助。

JavaScript Angular TypeScript 按钮单选组

addMoreQuestions() {
  const existingQuestionSet = this.questionandAnswer[0].slice();
  console.log('existingQuestionSet =>', existingQuestionSet);

  this.questionandAnswer.push(existingQuestionSet);
  console.log('this.questionAnswer =>', this.questionandAnswer);

  // Copy the selected options for the previous question set
  const previousSelectedOptions = [...this.selectedOptions];

  this.answers.push(previousSelectedOptions);
  console.log('answers =>', this.answers);

  // Reset selectedOptions only for the new question set
  const newQuestionSetSelectedOptions = Array(existingQuestionSet.length).fill(null);
  this.selectedOptions.push(newQuestionSetSelectedOptions);
}

根据 API 响应选择选项的第二个问题，您可以遍历 res 数组并将值用作索引在每个问题集中选择相应的选项。

// Assuming `res` and `options` are accessible in the current scope
for (let i = 0; i < res.length; i++) {
  const answerSet = res[i];
  const questionSet = this.questionandAnswer[i];

  for (let j = 0; j < answerSet.length; j++) {
    const answerId = answerSet[j];

    // Find the corresponding option for the answerId
    const option = questionSet.content.find(content => content.id === answerId);

    if (option) {
      // Set the corresponding index as selected
      const optionIndex = questionSet.content.indexOf(option);
      this.selectedOptions[i][j] = optionIndex;
    }
  }
}

单选按钮中的 Angular-Handle 嵌套数组

Angular-Handle nested array in radio-button

评论

评论