Question

我最近开始研究Angular，而我目前正在进行一项任务，即制作一个带有半径输入的表格。在完成表单后，我现在正在检查答案是否正确，但在进行此检查时我遇到了两个错误。我想要做的是，从数组中删除所有不正确的答案（值= 0）。

这是HTML文件：

 <form>
  <div class="container" *ngFor = "let question of questions">
    <h4>{{question.question}}</h4>
    <label class="radio" *ngFor="let alternative of question.alternatives">
      <input class="subtotal" type="radio" name="{{question.question}}" value="{{alternative.value}}"> {{alternative.answer}}
    </label>
  </div>
</form>

这是Typescript文件：

  sumValue(){
    let radius = document.querySelectorAll(".subtotal:checked");
    if(radius.length == 11){
      console.log(radius);
      for (let index = 0; index < radius.length; index++) {
        console.log(radius[index].value);
        if(radius[index].value == 0){
          radius.splice(index, 1);
        }
      }
    } else {
      console.log('error');
    }
  }

在＆＃34; console.log（radius [index] .value）;＆＃34;我收到以下错误：

[ts] Property 'value' does not exist on type 'Element'.

＆＃34; radius.splice（index，1）;＆＃34;我明白了：

[ts] Property 'splice' does not exist on type 'NodeListOf<Element'.

I still haven't reputation to post images yet, but this is the view on VSCode 我感谢任何帮助和解释其他方法来解决我的问题，即如何在数组中只留下正确的答案。谢谢！

Answer 1

您看到的是类型错误。

调用document.querySelectorAll时，会返回NodeList<Element>，因为它不知道匹配的元素将是<input/>。 What it returns instead is the base type for all elements，这是<input/>的超类。

第二个问题是NodeList没有splice方法。

要修复第一个问题，您可以为radius变量指定一个类型：

let radius: NodeList<HTMLInputElement> = document.querySelectorAll(".subtotal:checked");

但是，在组件中使用HTML元素不是“正确的”角度方式。您不希望直接在角度组件中访问HTML元素 - 您希望保持页面与其背后的逻辑之间的分离。相反，您可以使用Angular的绑定系统。更具体地说，ngModel：

 <form>
  <div class="container" *ngFor = "let question of questions">
    <h4>{{question.question}}</h4>
    <label class="radio" *ngFor="let alternative of question.alternatives">
      <input class="subtotal" type="radio" [attr.name]="question.question" [value]="alternative.value" [(ngModel)]="question.answer"> {{alternative.answer}}
    </label>
  </div>
</form>

现在，只要用户编辑输入，question.answer属性就会自动更新。在组件中，您可以遍历结构以删除无效的替代方案：

sumValue(){

    this.questions.forEach(question => {
        question.alternatives = question.alternatives.filter(a => a.value != 0);
    });

}

此代码使用the filter method of an array创建一个仅包含值不等于零的元素的数组。然后我们可以使用它来替换旧的alternatives数组。 Angular将处理呈现页面以反映数据的变化。

You can read more about ngModel here.

You can also read more about how to use radio buttons with angular here

＆＃34;＆＃34;

1 个答案: