我正在使用 Ionic 框架制作一个应用程序,到目前为止,我有 *ngFor 生成的输入,我想在单击按钮后获取每个输入的值。我尝试过使用响应式表单,但无法使其工作。
<ion-list>
<ion-item *ngFor="let item of players; index as i">
<ion-chip>
<ion-input placeholder="Nombre jugador {{i+1}}" type="text"></ion-input>
<ion-icon name="person-add"></ion-icon>
</ion-chip>
</ion-item>
<br />
</ion-list>
和我的 .ts 文件。
ngOnInit() {
this.getJugadores();
}
getJugadores(){
this.storage.get("num_players").then(x =>{
if (x){
this.players = new Array(x);
}else{
console.log("error");
}
});
}
我想将每个值存储在一个对象数组中。
最佳答案
使用 Angular,在表单上获取/设置数据的最简单方法之一就是简单地使用 [(ngModel)]
数据绑定(bind)。
1) 定义数据结构。如果您有多个输入,请考虑定义一个数组。
2) 使用 [(ngModel)]
绑定(bind)到该结构。
以下是一些可能有帮助的信息:https://angular.io/guide/template-syntax#binding-syntax-an-overview
模板代码
<div *ngFor="let item of players; index as i">
<input placeholder="Nombre jugador {{i+1}}" type="text"
[(ngModel)]="item.name"/>
</div>
组件代码
players: Player[] = [];
ngOnInit() {
// Call a service to get data
// Hardcoded here as an example
this.players = [
{id: 1, name: "Joe"},
{id:2, name: "Stefan"}
]
}
接口(interface)代码
export interface Player {
id: number,
name: string
}
我这里有一个工作示例:https://stackblitz.com/edit/angular-b5uppm
关于angular - 从 ng 获取生成输入的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54796517/