时间戳

首页 > 解决方案 > *ngFor 值与 ngModel 绑定

angular - *ngFor 值与 ngModel 绑定

问题描述

在这里我正在尝试 *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

解决方案

我认为您为此使用了错误的方法，并且语法不正确。在这种情况下，您试图绑定到 *ngFor 的最后一个“数据”迭代。也许尝试使用 Reactive 或模板表单，因为它是一个数组，我会使用 Reactive 表单。Angular 对此有很好的文档。如果你被卡住了打我:)

推荐阅读