Javascript Angular CLI，TypeError:无法读取属性'；价值'；未定义的_Javascript_Html_Angular_Typescript_Express

Javascript Angular CLI，TypeError:无法读取属性'；价值'；未定义的

javascript html angular typescript express

Javascript Angular CLI，TypeError:无法读取属性'；价值'；未定义的,javascript,html,angular,typescript,express,Javascript,Html,Angular,Typescript,Express,我试图获取单选按钮值并将其发送到MySql数据库，但我得到一个错误，该错误表示TypeError:cannotreadproperty'value'of undefined。我在这个项目中使用Angular和express JS。在服务器端，查询看起来像这样app.post（'/post'，…）{let sql='插入结果（question1，question2，question3）值（“+req.body.question1+”，“+req.body.question2+”，“+req.bod

我试图获取单选按钮值并将其发送到MySql数据库，但我得到一个错误，该错误表示

TypeError:cannotreadproperty'value'of undefined

。我在这个项目中使用Angular和express JS。在服务器端，查询看起来像这样

app.post（'/post'，…）

{

let sql='插入结果（question1，question2，question3）值（“+req.body.question1+”，“+req.body.question2+”，“+req.body.question3+”）；

}。我已经在json文件中有了问题和选项

//data.json
[{
“被调查者”：101，
“surveyname”：“维生素”，
“createdby”：“Sarah博士”，
“createddate”：“2018年1月16日”，
“问题”：[{
“问题ID”：1，
“问题描述”：“Q-1？”，
"问题1,，
“允许选项”：[{
“选项”：“A”，
回答：“是”
},
{
“选项”：“B”，
回答：“否”
}
]
},
{
“问题ID”：2，
“问题描述”：“问题2”，
"问题二":，
“允许选项”：[{
“选项”：“A”，
回答：“是”
},
{
“选项”：“B”，
回答：“否”
},
{
“选项”：“C”，
回答：“不知道”
}
]
},
{
“问题ID”：3，
“问题描述”：“问题3”，
"问题1,，
“允许选项”：[{
“选项”：“A”，
回答：“是”
},
{
“选项”：“B”，
回答：“否”
}
]
}
]
}]

不要在模板中使用此

。这仅用于组件内部。因为在模板内部，您使用的所有变量都是组件/类变量。无法在模板中引用局部变量。直接访问成员变量，如下所示：
(click)="pushResults(question1.value, question2.value, question3.value)"

不要在模板内使用此
。这仅用于组件内部。因为在模板内部，您使用的所有变量都是组件/类变量。无法在模板中引用局部变量。直接访问成员变量，如下所示：
(click)="pushResults(question1.value, question2.value, question3.value)"

由于不使用角度形状，因此可以通过“形状元素”集合获取值：
您需要做的第一件事是掌握表单
元素
<form #myForm>


角模板驱动形式
1） 将FormsModule
导入您的NgModule

import { FormsModule } from '@angular/forms';    

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
})
export class AppModule { }

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  ...
})
export class AppComponent {

  form: FormGroup;
  ...

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      question1: '',
      question2: '',
      question3: ''
    })
  }

  pushResults(formValue) {
    console.log(formValue.question1, formValue.question2, formValue.question3);
  }
}

2） 在组件中创建数组类型的属性
answers: string[] = [];

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

3） 更改模板，如：
<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

2） 在组件中创建FormGroup

answers: string[] = [];

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

3） 更改模板，如：
<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>


{{items2.questionid}。{{items2.questiondesc}}
{{items3.options}。{{items3.answer}


提交
{{form.value | json}}



如果只想制作一个表单，则无需导入FormsModule
或ReactiveFormsModule
，但对于缩放项目，我建议使用一种角度内置方法。
因为不使用角度表单，所以可以通过表单元素集合获取值：
您需要做的第一件事是掌握表单
元素
<form #myForm>


角模板驱动形式
1） 将FormsModule
导入您的NgModule

import { FormsModule } from '@angular/forms';    

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
})
export class AppModule { }

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  ...
})
export class AppComponent {

  form: FormGroup;
  ...

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      question1: '',
      question2: '',
      question3: ''
    })
  }

  pushResults(formValue) {
    console.log(formValue.question1, formValue.question2, formValue.question3);
  }
}

2） 在组件中创建数组类型的属性
answers: string[] = [];

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

3） 更改模板，如：
<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

2） 在组件中创建FormGroup

answers: string[] = [];

<form [formGroup]="form">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
              name="question{{items2.questionid}}"  
              formControlName="question{{i+1}}"
              [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
  </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>

3） 更改模板，如：
<form #form="ngForm">
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question; let i = index">
      <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
      <div *ngFor="let items3 of items2.alloptions; let idx=index">
        <div class="radio">
          <input type="radio" 
            name="question{{items2.questionid}}"
            [(ngModel)]="answers[i]"                     
            [value]="items3.answer"><b>{{items3.options}}</b>. {{items3.answer}}
        </div>
      </div><br>
    </div>
  </div>
  <div align="center">
    <button type="button" class="btn btn-sm btn-success" (click)="pushResults(form.value)">
      SUBMIT
    </button>
  </div>
</form>
<pre>{{ form.value | json }}</pre>


{{items2.questionid}。{{items2.questiondesc}}
{{items3.options}。{{items3.answer}


提交
{{form.value | json}}



如果你只想做一个表单，你不需要导入FormsModule
或ReactiveFormsModule
，但对于scale项目，我建议使用一种角度内置方法。
谢谢，更新了我的代码，但仍然得到了相同的错误。检查其他问题的答案：这可能会有帮助。Else控制台推送功能接收的值。在plunk中共享相同的内容。谢谢，更新了我的代码，但仍然出现相同的错误。请检查其他问题的答案：这可能会有所帮助。Else控制台推送功能接收的值。在plunk中共享相同的内容。回答如下。谢谢，我用这个回答。非常感谢。