如何编辑和更新 Angular 中的数组项，该文件来自 JSON

Question

I am trying to implement an edit which will edit the object and then at update will add the new data and will delete the old data. I want only the comments$ to edit and update.

I am getting the JSON I am showing I can edit but I am not able to save and to show in UI.

Here is the code which I have tried.

@Injectable({
providedIn: 'root'
})
export class CommentService {
private baseUrl = 'http://localhost:3000/comments';

constructor(private http: HttpClient) { }

getComment(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/${id}`);
}
update(comment: Comment, id) {
return this.http.put(`${this.baseUrl}/${id}`, comment);

}
}

posts$: Observable<Post[]>;
  comments$: Observable<Comment[]>;
  groupedComments$: Observable<CommentGroup>;
  editableComment = emptyComment();

  constructor(private postsService: PostService,
              private commentsService: CommentService,
              private confirmationDialogService: ConfirmationDialogService) {
    this.posts$ =  this.postsService.getPostsList();
    this.comments$ = this.commentsService.getCommentsList();
    this.getAllData();
  }

  ngOnInit() {

  }
  getAllData() {
    this.groupedComments$ = this.comments$.pipe(
      map(comments => lodash.groupBy(comments, 'postId'))
    );
  }

  isEditable(comment: Comment): boolean {
    return this.editableComment.id === comment.id;
  }
  editComment(comment: Comment) {
    this.editableComment = comment;
    this.getAllData();
  }
  update(itemId, itemName, itemObj) {
      console.log(itemId, itemName, itemObj);
  }
  cancel() {
    this.editableComment = emptyComment();
  }

And here is the HTML

<tr *ngFor="let post of posts$ | async; trackBy:trackByFunction">
    <td class="title">{{post.title}}</td>
    <td class="body">{{post.body}}</td>
      <ng-container *ngIf="groupedComments$ | async as groupedComments">
    <div *ngFor="let comment of groupedComments[post.id]; trackBy:trackByFunction">
      <div>
      <td *ngIf="!isEditable(comment)" class="comment">{{comment.name}}</td>
      <textarea class="comment" *ngIf="isEditable(comment)" [(ngModel)]="editableComment.name"></textarea>
      <td *ngIf="!isEditable(comment)"class="comment">{{comment?.body}}</td>
      <textarea class="comment" *ngIf="isEditable(comment)" [(ngModel)]="editableComment.body"></textarea>

      <td class="comment" *ngIf="comment.email === 'Just@do.it' && comment.body.length < 200">
        {{comment.email}}
        <button  *ngIf="!isEditable(comment)" (click)="deleteComment(comment.id)" class="btn btn-danger">Delete</button>
        <button *ngIf="!isEditable(comment)" (click)="editComment(comment)" class="btn btn-info" style="margin-left: 10px">Edit</button>
        <button *ngIf="isEditable(comment)" (click)="update(comment.id, comment.name, comment)" class="btn btn-info" style="margin-left: 10px">Update</button>
        <button *ngIf="isEditable(comment)" (click)="cancel()" class="btn btn-danger" style="margin-left: 10px">Cancel</button>
      </td>
      </div>
    </div>
      </ng-container>
  </tr>

Answer 1

Updated the important part. You need somewhere a function to store your changed comment.

groupedComments$: Subject<CommentGroup> = new ReplaySubject(1);

getAllData() {
  this.commentService.getCommentsList()
    .pipe(map(comments => lodash.groupBy(comments, 'postId')))
    .pipe(take(1)) // this will unsubscribe for you, after one value was emitted
    .subscribe(commentGroup => this.groupedComments$.next(commentGroup));
}

editComment(Comment comment) {
  this.commentService.update(comment);
  getAllData();
}

On HTML you can subscribe on this.groupedComments .