angular - 从 ng 获取生成的输入的值
问题描述
我正在使用 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)]
数据绑定。
1) 为您的数据定义一个结构。如果您有多个输入,请考虑定义一个数组。
2) 使用 绑定到该结构[(ngModel)]
。
以下是一些可能有帮助的信息: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"}
]
}
接口代码
export interface Player {
id: number,
name: string
}
我在这里有一个工作示例:https ://stackblitz.com/edit/angular-b5uppm
推荐阅读
- php - Wordpress 仪表板未正确加载
- regex - Git责备正则表达式提取提交、行号和代码
- python - 如何在首页发布帖子?
- docker - Hadoop不使用IP无法访问datanode
- python - 如何在从 docker 容器运行的 jupyter 笔记本中获取黑色代码格式?
- promise - Axios 使用拦截器处理错误(js 承诺)
- postgis - 在 PostGIS 中何时使用 ST_Transform 以及何时使用 ST_SetSRID?
- javascript - Vue.js:发射后未在父组件中触发的方法
- python - 在 Google 学术搜索结果中单击“显示更多”按钮
- postgresql - 是否可以在 postgresql 数据库中导入 HR 模式?我似乎找不到办法做到这一点