Angular: мне нужно обновить после использования CRUD - PullRequest
Новая
       5

Angular: мне нужно обновить после использования CRUD

1 голос
/ 21 мая 2019

Когда я добавляю новое сообщение через свой компонент добавления поста, оно отправляет сообщение в мой компонент панели мониторинга. Этот компонент содержит обзор всех сообщений, полученных с помощью службы данных.

Однако ...

Всякий раз, когда я выполняю операцию CRUD, мне нужно обновлять свою страницу, чтобы просмотреть изменения. Я подумал, что это как-то связано с Observables. Я думаю, что я использую их правильно, но они, кажется, не работают. 

export class DashboardComponent {
public filterPostTitle: string;
public filterPost$ = new Subject<string>();
private _fetchPosts$: Observable<Post[]> = this._postDataService.posts$;

public loadingError$ = this._postDataService.loadingError$;

  showAddPost = false;
  constructor(private router: Router, private _postDataService: PostDataService) {
    this.filterPost$.pipe(
      distinctUntilChanged(),
      debounceTime(300),
      map(val => val.toLowerCase())
    ).subscribe(val => (this.filterPostTitle = val));
  }

  toggleAddPost(): void {
    this.showAddPost = !this.showAddPost;
  }

  get posts$(): Observable<Post[]> {
    return this._fetchPosts$;
  }

  applyFilter(filter: string) {
    this.filterPostTitle = filter;
  }
  addNewPost(post) {
    this._postDataService.addNewPost(post).subscribe();

  }

@Injectable({
  providedIn: 'root'
})
export class PostDataService {
  public loadingError$ = new Subject<string>();
  public $postsChange = new Subject<any>();

  constructor(private http: HttpClient) { }
  get posts$(): Observable<Post[]> {
    return this.http.get(`${environment.apiUrl}/posts/`).pipe(catchError(error => {
      this.loadingError$.next(error.statusText);
      return of(null);
    }),
    map((list: any[]): Post[] => list.map(Post.fromJSON)),
    share()
    );
  }

  addNewPost(post: Post) {
    return  this.http.post(`${environment.apiUrl}/posts/`, post.toJSON());
  }
}

Ответы [ 2 ]

1 голос
/ 21 мая 2019

Установка posts$ как геттер не будет работать вообще. Он не испускает никаких ценностей сам по себе. Вам понадобится дополнительный метод для получения сообщений.

Чтобы гарантировать, что вы всегда будете отправлять сообщения после addNewPost() метода, вы можете отобразить ответ после публикации и отправить извлеченные сообщения по вашей теме. Однако вы также можете вызвать этот метод в DashboardComponent после получения ответа от метода addNewPost (без необходимости подписки на fetchPosts в вашем PostDataService).

Вот пример: https://stackblitz.com/edit/angular-kx4cco

1 голос
/ 21 мая 2019

Вы можете создать функцию actionsForSucess и передать вашей подписке что-то вроде этого, чтобы перенаправить на ваше новое создание. 

addNewPost(post) {
  this._postDataService.addNewPost(post).subscribe(
    post => actionsForSuccess(post)
  );
}

private actionsForSuccess(post: Post) {

this.router.navigateByUrl('posts', { skipLocationChange: true })
  .then(
    () => this.router.navigate(['posts', 'edit', post.id])
  );
}
...