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

问题描述 投票:0回答:1

对于我应该怎么做,我有点困惑。我的应用中有一个“Feed”,Feed中的每个帖子都有一个评论框。这是一些示例代码:

<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定位输入字段,但我意识到这不是好的做法。

另一方面,Feed本身将定期更新新帖子。真诚地感谢提前。

angular typescript ionic-framework input
1个回答
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);
}
© www.soinside.com 2019 - 2024. All rights reserved.