首页 > 解决方案 > 离子/角度,从字段数组提交输入字段

问题描述

我对我应该如何处理这件事有点困惑。我的应用中有一个“提要”,提要中的每个帖子都有一个评论框。这是一些示例代码:

<ion-card class="feed" *ngFor="let post of feed">
  <ion-item no-lines class="comment-input">
    <ion-input type="text" placeholder="Write comment ..."></ion-input>
    <button item-right ion-button (click)="feedPostComment(post)">Comment</button>
  </ion-item>
</ion-card>

现在我正在努力找出从其feedPostComment()上方的输入字段中提取文本的最佳方法。我知道我可以使用ngModel并且在许多情况下我在页面上没有以这种方式重复的表单和输入系统,但我无法理解在这种情况下我将如何做到这一点。

我在想我可以设置post.ididorname上的字段ion-input,并直接通过 DOM 定位输入字段,但我意识到这不是一个好习惯。

另一件事是,提要本身将定期更新新帖子。提前致以最诚挚的感谢。

标签: angulartypescriptionic-frameworkinput

解决方案


与对象属性一起使用ngModel以存储添加到该特定帖子的评论。这是一个stackblitz示例。

<ion-card class="feed" *ngFor="let post of feed">
    <ion-item no-lines class="comment-input">
        <ion-input [(ngModel)]="post.comment" type="text" placeholder="Write comment ..."></ion-input>
        <button item-right ion-button (click)="feedPostComment(post)">Comment</button>
    </ion-item>
</ion-card>


//controller 
feedPostComment(post) {
  console.log('post_comment => ', post.comment);
  console.log('post_id => ',post.id);
}

推荐阅读