首页 > 解决方案 > 从离子中提交数组时无法读取未定义的属性“值”

问题描述

我有一个正在使用 ionic 开发的投票结果收集器表单

我的数据库结构是这样的

在此处输入图像描述

如果您查看表上的电话号码08033918581,他能够一次将三个结果插入数据库。在 php 中执行此操作没有压力,但我尝试使用我在 HTML 中使用的相同方法在ionic中实现相同的目标,但不能。

下面是我在 ionic 中的 result.html

<ion-item class="mylist hideme">
<ion-input type="text"  *ngFor="let post of postList" value="{{post.phoneNo}}" placeholder="Phone" name="phones" #phones></ion-input>
</ion-item>

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly  name="party[]" placeholder="APC"  value="apc"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote[]" #vote></ion-input>

</ion-item>

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly name="party[]"  value="pdp"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote[]" #vote></ion-input>
</ion-item>

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly  name="party[]"  value="apga"></ion-input>  
<ion-input type="number" placeholder="Total Votes" name="vote[]" #vote></ion-input>
</ion-item>    

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly   name="party[]"  value="lp"></ion-input>
<ion-input type="number" placeholder="Total Votes" name="vote[]" #vote></ion-input>

</ion-item>

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly   name="party[]"  value="ivc"></ion-input> 
<ion-input type="number" placeholder="Invalid vote cast" name="vote[]" #vote></ion-input>

</ion-item>

<ion-item class="mylist chat-item item-remove-animate item-avatar item-icon-right list card animated fadeInUp">
<ion-input type="text" readonly  readonly  name="party[]"  value="tvc"></ion-input>
<ion-input type="number"  placeholder="Total vote cast" name="vote[]" #vote></ion-input>

</ion-item>
<div class="padding">
<button ion-button  round   small (click)="submit()" class="btns ink fadeInUp">Add Result</button>
</div>

在我的.ts我有这个

@ViewChild("party")party;
@ViewChild("vote")vote; 
@ViewChild("phones")phones; 

对于发送功能

submit(){

  //// check to confirm the username, email, telephone and password fields are filled


  if(this.vote.value==""){

  let alert = this.alertCtrl.create({

  title:"ATTENTION",

  subTitle:"Total vote cast is required. Enter 0 where not available.",

  buttons: ['OK']

  });

  alert.present();

  }

  else

  {

  var headers = new Headers();

  headers.append("Accept", 'application/json');

  headers.append('Content-Type', 'application/json' );

  let options = new RequestOptions({ headers: headers });

  let data = {

    party: this.party.value,
    vote:   this.vote.value, 
    phone:   this.phones.value

  };

  let loader = this.loading.create({

  content: 'Submitting, please wait…',

  });

  loader.present().then(() => {

  this.http.post('http://edomonitor.com/electionApi/addResult.php',data, options)

  .map(res => res.json())

  .subscribe(res => {

  loader.dismiss()

  if(res=="RESULT SUCCESSFULLY ENTERED"){

  let alert = this.alertCtrl.create({

  //title:"CONGRATS",

  subTitle:(res),

  buttons: ['OK']

  });

  alert.present();

  this.navCtrl.push(PostPage);

  }else if(res=="YOU ARE NOT AUTHORISE TO SEND RESULT MORE THAN ONCE"){

    let alert = this.alertCtrl.create({

      //title:"ERROR",

      subTitle:(res),

      buttons: ['OK']

      });

      alert.present();

    }else

  {

  let alert = this.alertCtrl.create({

  //title:"ERROR",

  subTitle:(res),

  buttons: ['OK']

  });

  alert.present();

  }

  });

  });

  }

  }

澄清一下: 表单有输入名称 party[] 已经定义但在投票输入中,名称 vote[] 是类别投票的地方。

我正在尝试找到一种方法,我可以在表格中为每一方获得选票并将其发送到服务器。

我究竟做错了什么?

标签: arraysionic-framework

解决方案


推荐阅读