[英]How to edit and update item of array in Angular which file is coming from JSON
我正在嘗試執行一個編輯,它將編輯 object,然后在更新時添加新數據並刪除舊數據。 我只想編輯和更新comments$
。
我得到JSON
我正在顯示我可以編輯但我無法保存並在 UI 中顯示。
這是我嘗試過的代碼。
@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();
}
這是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>
更新了重要部分。 您需要一個 function 來存儲您更改的評論。
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();
}
在 HTML 上,您可以訂閱this.groupedComments
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.