离子/角度,从字段数组提交输入字段

时间:2018-09-02 15:31:10

标签: angular typescript ionic-framework input

我对应该如何处理感到困惑。我的应用程序中有一个“提要”,提要中的每个帖子都有一个注释框。这是一些示例代码:

<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.id设置为id上的nameion-input字段,然后直接通过DOM定位输入字段,但是我意识到这不是一个好习惯。

另一件事是,供稿本身将定期更新为新帖子。最诚挚的感谢。

1 个答案:

答案 0 :(得分:1)

ngModel与object属性一起使用以存储添加到该特定帖子的评论。 这是一个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);
}
相关问题