主题RXJS自动reflesh Angular不起作用

Question

在Angular创建任务后，我正在尝试自动删除桌子。

包括GetTask方法和表格的我的家庭控制器：

Home-Component：

ngOnInit(): void {
    if(this.token){
      this.taskService.autoRefresh().subscribe(() => {
        this.getTasks();
      });
      this.getTasks();
    }
  }

  openModal() {
    this.dialog.open(CreateTaskComponent);
  }

  getTasks(): void {
    this.taskService.get(this.token).subscribe(
      (response) => {
        if (response) {
          this.tasks = response.tasks;
        }else{
          this.status = 'Aún no tienes creadas tareas';
        }
      },
      (error) => {
        console.log(error)
      }
    );
  }

Home-tivew：

<div *ngIf="tasks && tasks.length > 0">
    <div class="row">
        <div class="col-md-12">
            <table class="table mt-3">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nombre</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let t of tasks">
                        <th scope="row">{{t.id}}</th>
                        <td>{{t.name}}</td>
                        <td [ngSwitch]="t.done">
                            <span *ngSwitchCase="0">Pendiente</span>
                            <span *ngSwitchCase="1">Hecho</span>
                        </td>
                        <td [ngSwitch]="t.done">
                            <span *ngSwitchCase="0">Hecho Editar Borrar</span>
                            <span *ngSwitchCase="1">Borrar</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

我的创建组件（包括模式）

  onSubmit(): void {
    const task: ITask = this.createTaskForm.value
    this.taskService.create(task, this.token).subscribe(
      (response) => {
        if (response) {
          this.status = `Tarea ${response.task.name} creada!`;
        } else{
          this.status = 'Error al crear la tarea!';
        }
      },
      (error) => {
        console.log(error)
      }
    );
  }

我的任务服务：

  private _subject = new Subject<void>();

  constructor(private _http: HttpClient) {}

  autoRefresh(){
    return this._subject;
  }
  
  create(task: ITask, token: string): Observable<any> {

    const headers = new HttpHeaders()
    .set(
      'Content-Type',
      'application/x-www-form-urlencoded'
    )
    .set('Authorization', token);

    const body = new URLSearchParams();
    body.set('name', task.name);


    const url = `${apiUrl}create`;

    return this._http.post(url, body.toString(), { headers: headers }).pipe(
      tap(() => {
        this._subject.next();
      })
    );
  }

  get(token: string | null): Observable<any> {
    const url = `${apiUrl}get-tasks/${token}`;

    return this._http.get(url);
  }

为什么它不起作用？它不会给我任何错误或任何错误，它只是忽略了该主题，就好像它不存在或未正确应用。我希望你能帮我。问候。

Answer 1

方法AutoreFresh（）应该看起来像：

autoRefresh() {
 this._subject.asObservable();
}

因为您想订阅该主题，必须将其作为可观察的返回。

希望它有帮助。

编辑：

尝试以下操作：

您的任务服务：

private _subject = new Subject<void>();

  constructor(private _http: HttpClient) {}

  autoRefresh(){
    return this._subject.asObservable();
  }

  // new method
  refreshTable() {
    this._subject.next();
  }
  
  create(task: ITask, token: string): Observable<any> {

    const headers = new HttpHeaders()
    .set(
      'Content-Type',
      'application/x-www-form-urlencoded'
    )
    .set('Authorization', token);

    const body = new URLSearchParams();
    body.set('name', task.name);


    const url = `${apiUrl}create`;

    return this._http.post(url, body.toString(), { headers: headers })
  }

  get(token: string | null): Observable<any> {
    const url = `${apiUrl}get-tasks/${token}`;

    return this._http.get(url);
  }

您的创建组件：

onSubmit(): void {
    const task: ITask = this.createTaskForm.value
    this.taskService.create(task, this.token).subscribe(
      (response) => {
        if (response) {
          this.status = `Tarea ${response.task.name} creada!`;
          
          // call the new method "refreshTable()"
          this.taskService.refreshTable();
        } else{
          this.status = 'Error al crear la tarea!';
        }
      },
      (error) => {
        console.log(error)
      }
    );
  }