【问题标题】:Ionic/Angular, Submitting an Input Field from Array of Fields离子/角度,从字段数组提交输入字段
【发布时间】:2019-02-07 20:12:45
【问题描述】:

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

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

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

【问题讨论】:

    标签: angular typescript ionic-framework input


    【解决方案1】:

    使用 ngModel 和对象属性来存储添加到该特定帖子的 cmets。 这是一个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);
    }
    

    【讨论】:

    • 你太棒了。非常感谢!
    • 你太棒了Apu。
    猜你喜欢
    • 1970-01-01
    • 2019-10-02
    • 1970-01-01
    • 1970-01-01
    • 2021-11-29
    • 2017-06-03
    • 2021-11-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多