Ionic / Angular, Отправка поля ввода из массива полей

Question

Меня немного смущает, как я должен поступить об этом. У меня есть «канал» в моем приложении, где у каждого сообщения в ленте есть поле для комментариев. Вот пример кода:

<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 или name в ion-input и нацелить поле ввода непосредственно через DOM, но я понимаю, что это не очень хорошая практика.

Другое дело, что сам канал будет регулярно обновляться с новыми сообщениями. Искренне спасибо заранее.

Answer 1

Используйте 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);
}