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