javascript - Angular CLI，类型错误 : Cannot read property 'value' of undefined

Question

我正在尝试获取单选按钮值并将它们发送到 MySql 数据库，但我收到一条错误，指出 TypeError: Cannot read property 'value' of undefined。我在这个项目中使用 Angular 和 Express JS。在服务器端，查询看起来像这样 app.post('/post', ...){ let sql = 'INSERT INTO results(question1, Question2, Question3)values ("'+req.body.question1+'", "'+req.body.question2+'", "'+req.body.question3+'")'; }.我已经在 json 文件中包含了问题和选项。

//data.json

[{
  "surveyid": 101,
  "surveyname": "Vitamin",
  "createdby": "Dr. Sarah",
  "createddate": "16-01-2018",
  "question": [{
      "questionid": 1,
      "questiondesc": "Q-1?",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    },

    {
      "questionid": 2,
      "questiondesc": "Q_2?",
      "qno": 2,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        },
        {
          "options": "C",
          "answer": "Don't know"
        }
      ]
    },

    {
      "questionid": 3,
      "questiondesc": "Q_3",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    }
  ]
}]

然后我将所有问题和选项加载到 html 模板中。

<form>
  <div *ngFor="let items of jsonData">
    <div *ngFor="let items2 of items.question">
      <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}}" [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(question1.value, question2.value, question3.value)">SUBMIT</button>
  </div>
</form>

这是服务和组件

//service.ts
getJsonData(): Observable < any > {
  return this.http.get('../assets/data.json')
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'server returns error'))
}

pushResults(question1: string, question2: string, question3: string) {
  return this.http.post('http://localhost:8000/newPush', {
    question1: question1,
    question2: question2,
    question3: question3
  });
}

//component.ts
jsonData = [];
getJsonData() {
  this.AppService.getJsonData().subscribe(
    data => console.log('json', this.jsonData = data),
    error => console.log('server returns error')
  );
}

pushResults(question1: string, question2: string, question3: string) {
  this.AppService.pushResults(question1, question2, question3);
}

有人可以帮我解决这个问题吗？如果需要更多片段，请告诉我。

Answer 1

由于您不使用 Angular 表单，因此您可以通过表单元素集合获取值:

您需要做的第一件事是获取 form 元素。

<form #myForm>

现在您可以像这样访问元素的值:

form.elements['question1'].value

<强> Native Form Example

Angular 模板驱动表单

1) 将 FormsModule 导入到 NgModule

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

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

2) 在组件中创建数组类型的属性

answers: string[] = [];

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>

<强> Template driven Form Example

Angular 模型驱动表单

1) 将 ReactiveFormsModule 导入到您的 NgModule

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

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

2) 在组件中创建 FormGroup

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);
  }
}

3)更改模板，例如:

<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>

<强> Model driven Form Example

<小时/>

如果您只想执行一种表单，则不需要导入 FormsModule 或 ReactiveFormsModule，但对于规模项目，我建议使用一种 Angular 内置方法。