Question

我具有以下HTML结构：

<div *ngFor="let post of posts">
  <div>{{post.description}}</div>
  <ul *ngFor="let comment of post.comments">
    <li>
      {{comment.description}}
    </li>
  </ul>
  <div>
    <textarea placeholder="leave your comments here"></textarea>
    <button (click)="addComment(post)">Save</button>
  </div>
</div>

考虑到它将在页面上包含很多帖子，如何动态地向正在撰写的特定帖子中添加新评论？

Answer 1

考虑添加以下功能签名，以传递相关的帖子和新评论：

<textarea placeholder="leave your comments here" #commentText></textarea>
<button (click)="addComment(post, commentText)">Save</button>

然后，假设评论是帖子模型的一部分，只需将新评论追加到已经存在的地方：

addComment(post: any, newComment: HTMLInputElement){
   post.comments.push(newComment.value);
}

Answer 2

由于您将帖子传递给addComment方法，因此您应该可以将其推送到相同的注释数组。

addComment(post:any){
   post.comments.push(comment);
}

并将ngModel添加到您的模板中，

<textarea placeholder="leave your comments here" [(ngModel)]='comment'

Answer 3

我建议制作一个帖子组件，其中还包含保存您的评论的struktur（如数组）。然后将* ngFor应用于新组件。

也许是这样的： https://stackblitz.com/edit/angular-b9tkry

它的结束像：

 <ng-container *ngFor="let post of posts">
   <app-post [post]="post"></app-post>
 </ng-container>

在app-post上：

<p>
  {{post.text}}
</p>
<ul *ngFor="let comment of post.comments">
  <li>{{comment}}</li>
</ul>
<textarea [(ngModel)]="newComment"></textarea>
<button (click)="addComment()">Add comment</button>

在* ngFor

3 个答案: