Question

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

Answer 1

我认为您为此使用了错误的方法，并且语法不正确。在这种情况下，您尝试绑定到* ngFor的最后一个“数据”迭代。也许尝试使用Reactive或模板表单，因为它是一个数组，所以我会使用Reactive表单。 Angular为此提供了出色的文档。如果您被卡住，请打我：）

* ngFor值与ngModel绑定

1 个答案: