* ngFor与ngModel绑定值

问题描述 投票:-1回答:1

在这里,我试图* ngFor值与ngModel绑定,但当我发送数据不绑定。在网络中显示空对象,下面我分享我的代码。如果有一些查询请在评论中询问。谢谢你

这是我的addtokens.html文件

    <div class="card-block" style="margin-left:9%" *ngFor="let data of addtokens">
                      <form role="form">
                          <div class="row">
                              <div class="col-xs-12">
                                  <div class="form-group">
                                      <label>FIRST NAME</label>
                                      <div class="input-group">
                                          <input type="tel" style="margin-right:-70%" [(ngModel)]="data.firstname" class="form-control" [ngModelOptions]="{standalone: true}" placeholder="Enter First Name" />
                                      </div>
                                  </div>
                              </div>
                          </div>


                          <div class="row">
                              <div class="col-xs-12">
                                  <div class="form-group">
                                      <label>LAST NAME</label>
                                      <div class="input-group">
                                          <input type="tel" style="margin-right:-70%" [(ngModel)]="data.lastname" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="Enter Last Name"/>
                                          <!-- <span class="input-group-addon"><span class="fa fa-credit-card"></span></span> -->
                                      </div>
                                  </div>
                              </div>
                          </div>



                          <div class="row">
                              <div class="col-xs-12">
                                  <div class="form-group">
                                      <label>ADDRESS</label>
                                      <div class="input-group">
                                          <input type="tel" style="margin-right:-70%" [(ngModel)]="data.address" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="Valid Address" />
                                          <!-- <span class="input-group-addon"><span class="fa fa-credit-card"></span></span> -->
                                      </div>
                                  </div>



 <div class="row">
                      <div class="col-xs-12">
                          <div class="form-group">
                              <label>CITY</label>
                              <div class="input-group">
                                  <input type="tel"  style="margin-right:-70%" [(ngModel)]="tokens.city" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="City" />
                                  <!-- <span class="input-group-addon"><span class="fa fa-credit-card"></span></span> -->
                              </div>
                          </div>
                      </div>
                  </div>


                  <div class="row">
                      <div class="col-xs-12">
                          <div class="form-group">
                              <label>ZIPCODE</label>
                              <div class="input-group">
                                  <input type="tel" style="margin-right:-70%" [(ngModel)]="tokens.zipcode" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="Zipcode" />
                                  <!-- <span class="input-group-addon"><span class="fa fa-credit-card"></span></span> -->
                              </div>
                          </div>
                      </div>
                  </div>


                  <div class="row">
                      <div class="col-xs-12">
                          <div class="form-group">
                              <label>EMAIL</label>
                              <div class="input-group">
                                  <input type="tel" style="margin-right:-70%" [(ngModel)]="data.email" [ngModelOptions]="{standalone: true}" class="form-control" placeholder="Email" />
                                  <!-- <span class="input-group-addon"><span class="fa fa-credit-card"></span></span> -->
                              </div>
                          </div>
                      </div>
                  </div>



                  <div class="card-footer">
                      <div class="row">
                          <div class="col-xs-12">
                              <button class="btn btn-warning btn-lg btn-block" (click)="Addtokens()">Process payment</button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

这是我的addtokens.component.ts文件

    public addtokendata:any[];
  public addtokens:any=[];

  tokens: Addtokens = new Addtokens();


  constructor(private batchservice:BatchService) { }

  ngOnInit() {
// this.Addtokens();
this.autoaddtoken();
  }
private Addtokens()
  {
    this.batchservice.addtoken(this.tokens).subscribe((resp)=>
  {

  })
  }
  public autoaddtoken()
  {
    this.batchservice.autoaddtoken().subscribe((resp)=>
  {
    this.addtokens=resp;
  })
  }

这是我的addtokens.model.ts文件

export class Addtokens

    {

         "firstname":string;
         "lastname":string;
        "address":string;
        "city":string;
        "zipcode":string;
         "email":string;
        "cardno":string;
        "cvv":string;
        "tokens":string;
    }
angular
1个回答
0
投票

我认为你使用了错误的方法,语法不正确。在这种情况下,您尝试绑定到* ngFor的最后一次“数据”迭代。也许尝试使用Reactive或模板表单,因为它的数组我将使用Reactive表单。 Angular有很好的文档。如果你遇到困难打我:)

© www.soinside.com 2019 - 2024. All rights reserved.