홈>
그래서 사용자가 게시물을 추가, 편집, 삭제하고 같은 페이지에 표시 할 수있는 매우 간단한 MEAN 스택 CRUD 앱을 개발 중입니다. 현재 라우팅을 사용하고 있지 않으며 두 가지 구성 요소가 있습니다.
1) 사후 생성 2) 게시물 목록
서비스를 사용하여 post-create에서 posts-list로 데이터를 전달하고 있습니다.
게시물 목록 구성 요소는 앱이로드 될 때 초기에 초기화되어 게시물 목록의 ngOnInit ()을 호출하고 데이터가 서버에서 가져옵니다.
포스트 생성 구성 요소에서 '저장'버튼을 클릭하면 게시물 목록 구성 요소의보기가 업데이트되는 대신 게시물 목록의 '포스트'배열이 업데이트되기를 원합니다. 페이지가 다시로드되고 ngOnInit ()가 다시 호출 될 때
페이지를 다시로드하지 않고 업데이트 된 데이터를 얻는 방법을 알 수 없습니다. 감사합니다
서비스 :
post.service.ts
import { Post } from './posts.interface';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class PostsService {
uri = 'http://localhost:3000/api/posts';
constructor(private http: HttpClient) {}
getPosts(): Observable<Post[]> {
return this.http.get<Post[]>(`${this.uri}`);
}
addPost(post: Post): Observable<Post> {
return this.http.post<Post>(`${this.uri}`, post);
}
post-create.component.html
<mat-card>
<form>
<mat-form-field>
<input matInput type="text" name="title" minlength="3"
[(ngModel)]="post.title" placeholder="Post Title">
</mat-form-field>
<mat-form-field>
<textarea matInput rows="4" name="content"
[(ngModel)]="post.content"
placeholder="Post Content">
</textarea>
</mat-form-field>
<button mat-raised-button color="primary" class="save-btn"
(click)="onAddPost()">Save Post</button>
</form>
</mat-card>
post-create.component.ts
import { Component, OnInit } from '@angular/core';
import { Post } from '../posts.interface';
import { PostsService } from '../posts.service';
@Component({
selector: 'app-posts-create',
templateUrl: './posts-create.component.html',
styleUrls: ['./posts-create.component.css']
})
export class PostsCreateComponent implements OnInit {
post: Post = {} as Post;
constructor(public postsService: PostsService) { }
ngOnInit() {
}
onAddPost() {
this.postsService.addPost(this.post).subscribe(post => {
this.post = post;
});
}
}
posts-list.component.html
<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let post of posts">
<mat-expansion-panel-header>{{post.title}}
</mat-expansion-panel-header>
<p>{{post.content}}</p>
<mat-action-row>
<button mat-button color="primary">EDIT</button>
<button mat-button color="warn">DELETE</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
posts-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Post } from '../posts.interface';
import { PostsService } from '../posts.service';
@Component({
selector: 'app-posts-list',
templateUrl: './posts-list.component.html',
styleUrls: ['./posts-list.component.css']
})
export class PostsListComponent implements OnInit {
posts: Post[];
constructor(public postsService: PostsService) {}
ngOnInit() {
this.getAllPosts();
}
getAllPosts() {
this.postsService.getPosts().subscribe((posts: Post[]) => {
this.posts = posts;
console.log(this.posts);
});
}
}
- 답변 # 1
관련 자료
- iOS 14, SwiftUI 인 경우에만 일부보기 표시
- ios - 전체보기의 일부로 수집보기
- Swiftui Reload View.
- dart - 페이지보기에서 플러터 빈 페이지
- ios - 스위프트이 - 뷰의 비율 만 표시
- c# - aspnet mvc의 Main Model에서만 View Model을 보내는 방법은 무엇입니까?
- javascript - 페이지 하나의 이미지 만 업로드
- joomla - 텍스트 만 포함 된 페이지 만들기
- android - 목록보기에서 굵게 표시 (각 항목의 일부에만 해당)
- ios - 페이지보기 컨트롤러에 점이 표시되지 않음
- javascript - 확대/축소 재설정 - 이동시 업데이트 만?
- bash 터미널에서 페이지별로 kubectl 로그보기
- javascript - 사용자가 로그인 한 경우에만 페이지로드
- html - 자바 스크립트에서 새 데이터로 페이지를 다시로드하는 방법은 무엇입니까?
- R은 상반기 만보기
- ruby on rails - CanCanCan는 속성이있는 경우에만 볼 수 있습니다
- javascript - 아약스를 통한 페이지 새로 고침
- javascript - JS 이벤트가 작동하려면 왜 페이지를 다시로드해야합니까?
- mPDF 만 인쇄 1 미완료 페이지 | PHP
- javascript - eventpreventDefault ();를 사용하여 페이지 다시로드를 중지하는 방법
관련 질문
- Rxjs Angular에서 Observable의 속성을 Observable로 반환
- Angular에서 rxjs를 사용하여 값 새로 고침 수정
- angular : 객체에서 여러 필드를 얻는 방법은 무엇입니까?
- RxJ 및 Angular의 주제에 "$" 기호 접미사를 사용해야 합니까?
- angular : '()=>관찰 가능 유형에 '구독' 속성이 없습니다. <모든>'
- angular : Observable이 구독될 때 html에 반영되지 않는 변경 사항
- Ngrx 데이터 서비스 오류가 있는 Angular 리졸버
- angular : 각도 9 canActivate가 완료되기 전에 canActivateChild가 시작되는 이유는 무엇입니까?
- angular : Rxjs -Observable을 사용하여 http 호출을 연결합니다.
- angular : RxJS 건너뛰기 연산자를 사용하여 API 호출을 건너뛰는 방법은 무엇입니까?
부모와 자식 구성 요소를 모두 공유해야합니다.이를 수행하는 한 가지 방법은 @Output 데코레이터와 함께 이벤트 이미 터를 사용하는 것입니다 :
먼저 자식 컴포넌트
post-create.component.ts
를 편집하십시오 부모 구성 요소에 이벤트를 생성하기 위해 EventEmitter를 추가하는 방법 :그러면 부모 구성 요소 html
마지막으로 부모 ts 파일posts-list.component.html
에서 당신은 HTML에 바인딩, 우리는emitNewPost
를 사용 유의하십시오 우리의 재산은@Output
에 의해 정의 된대로 데코레이터 :posts-list.component.ts
에 메소드를 추가하십시오. , 이제 새 게시물이 추가 될 때마다 addNewPost가 트리거됩니다.