홈>
그래서 사용자가 게시물을 추가, 편집, 삭제하고 같은 페이지에 표시 할 수있는 매우 간단한 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 새로 고침보기
- 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 ();를 사용하여 페이지 다시로드를 중지하는 방법
관련 질문
- angular : 관찰 가능한 타이머 틱은 시간이 지남에 따라 느려집니다
- angular : Ancular의 다음 값으로 Observable의 이전 값을 비교하십시오.
- angular : 각도 서비스는 여러 값으로 관찰 할 수 있습니다
- Angular 9를 사용하여 비동기 데이터를 자식 구성 요소에 전달하는 방법
- javascript : RxJS를 사용하여 시간 프레임 클릭 활성화 작업 버튼을 올바르게 구현하려면 어떻게해야합니까?
- Angular &RXJS : Observable을 반환하는 함수의 json을 객체 배열에 매핑하는 방법
- angular : 각도를 사용하여 백엔드에서 모든 데이터 검색
- typescript : Angular 2 -(ObserVableData | Async)가 아직 해결되지 않은 경우 로딩 정보 표시
- angular : 왜 Tests에서 instanceof officile이 false를 반환합니까?
- angular : 서비스에서 구성 요소로 지속적으로 수정 된 변수를 푸시하는 방법은 무엇입니까?
부모와 자식 구성 요소를 모두 공유해야합니다.이를 수행하는 한 가지 방법은 @Output 데코레이터와 함께 이벤트 이미 터를 사용하는 것입니다 :
먼저 자식 컴포넌트
post-create.component.ts
를 편집하십시오 부모 구성 요소에 이벤트를 생성하기 위해 EventEmitter를 추가하는 방법 :그러면 부모 구성 요소 html
마지막으로 부모 ts 파일posts-list.component.html
에서 당신은 HTML에 바인딩, 우리는emitNewPost
를 사용 유의하십시오 우리의 재산은@Output
에 의해 정의 된대로 데코레이터 :posts-list.component.ts
에 메소드를 추가하십시오. , 이제 새 게시물이 추가 될 때마다 addNewPost가 트리거됩니다.