Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Angular » Problema con subscribe

Angular - Problema con subscribe

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de María de Alejandría
Val: 2
Ha disminuido su posición en 4 puestos en Angular (en relación al último mes)
Gráfica de Angular

Problema con subscribe

Publicado por María de Alejandría (1 intervención) el 28/01/2021 10:58:20
Saludos

Estoy implementando un formulario en Angular 10 para crear salas de chat y tengo un problema derivado de pipe y subscribe, concretamente creo que el método finalize dentro de pipe no llega a llamarse haciendo que el registro no se lleve a cabo con éxito.

El código donde incluyo pipe, finalize y subscribe es el siguiente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
if (this.form.valid) {
 
      const formValue = { ...this.form.value };
 
      const body: chat = formValue as chat;
 
      this.loading = true;
 
      this.ChatService.crearchat(body)
      .pipe(
 
        finalize(() => {
          this.loading = false;
        })
      )
      .subscribe((x) => {
 
        this.messageService.add({
          severity: 'info',
          life: environment.modalTime,
          summary: 'Chat creado con éxito',
          detail: '' + x,
        });
        this.router.navigate(['/chat/home']);
      });
    } else {
     this.messageService.add({
        severity: 'error',
       life: environment.modalTime,
      summary: 'Formulario incorrecto',
      detail:
         'Asegúrese de rellenar todos los campos respetando el formato.',
      });
    }

Adjunto también el resto del código utilizado para implementar el formulario.

crearchatcomponent.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="locomotion_container">
  <div class="locomotion_center_bloque font">
    <form [formGroup]="form" (ngSubmit)="onSubmit()" method="post">
      <div>
 
       <label for="nombre"> Nombre del chat</label>
 
        <input  id="chatname" type="text" name="nombre"  formControlName="nombre" /> <br /> -->
 
      <label for="componentes"> Número máximo de personas del chat</label>
 
      <input  id="chatcomponentes" type="int" name="componentes" formControlName="componentes"  /> <br />
 
      <br />
 
</div>
      <button id="botonCrear" class="button" type="submit">Crear chat</button>
    </form>
  </div>
</div>


Models

chat.ts
1
2
3
4
5
export interface chat{
    id: number;
    nombre: string;
    componentes: number;
}

chatestado.ts
1
2
3
4
export interface chatestado{
    chatActivo: boolean;
 
}

chatrespuesta.ts
1
2
3
4
export interface chatResponse{
    id: number;
 
}

chat.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { ChatEstado } from './../models/chat/chatestado';
import { HttpClient, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { environment } from 'src/environments/environment';
import { chat } from '../models/chat/chat';
import { ChatRespuesta } from '../models/chat/chatrespuesta';
import { catchError } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root',
})
export class ChatService {
  constructor(private httpClient: HttpClient) {}
 
  private static readonly ENDPOINT: string = 'chat';
 
  id = '';
 
  crerchat(body: chat): Observable<Chatrespuesta> {
    return this.httpClient.post<ChatRespuesta>(
      `${environment.url}${ChatService.ENDPOINT}`,
      body
    );
  }
 
  getChatEstado(id: number): Observable<ChatEstado> {
    return this.httpClient.get<ChatEstado>(
      `${environment.url}${ChatService.ENDPOINT}/get-status/${chatCode}`
    );
  }
 
}

crearchat-routing.module.ts


1
2
3
4
5
6
7
8
9
10
11
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrearChatComponent } from './crearchat.component';
 
const routes: Routes = [{ path: '', component: CrearChatComponent}];
 
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Crearchat-RoutingModule { }

crearchat.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { Component, OnInit } from '@angular/core';
 
import { ChatService } from 'src/app/services/chat.service';
import { chatRespuesta } from 'src/app/models/chat/chatrespuesta';
 
import {
 
  FormBuilder,
 
  FormGroup,
  Validators,
} from '@angular/forms';
import { Router } from '@angular/router';
import { MessageService } from 'primeng/api';
import { DataService } from 'src/app/services/data.service';
import { environment } from 'src/environments/environment';
import { delay, finalize } from 'rxjs/operators';
import {chat} from 'src/app/models/chat/chat';
@Component({
  selector: 'app-crearchat',
  templateUrl: './crearchat.component.html',
  styleUrls: ['./crearchat.component.scss'],
})
export class CreatechatComponent implements OnInit {
  form: FormGroup;
  loading: boolean;
  constructor(
    private formBuilder: FormBuilder,
    private ChatService: ChatService,
    private router: Router,
    private messageService: MessageService,
    public dataService: DataService
 
  ) {
    this.loading = false;
    this.form = this.formBuilder.group({
 
     componentes:new FormControl(''),
 
      nombre:new FormControl(''),
      id: new FormControl(1),//El id tiene que generarse automáticamente,
      //pero en principio pongo uno de prueba
 
    });
 
}
 
ngOnInit(): void {}
  onSubmit(): void {
 
    if (this.form.valid) {
 
      const formValue = { ...this.form.value };
 
      const body: chat = formValue as chat;
 
      this.loading = true;
 
      this.ChatService.crearchat(body)
      .pipe(
 
        finalize(() => {
          this.loading = false;
        })
      )
      .subscribe((x) => {
 
        this.messageService.add({
          severity: 'info',
          life: environment.modalTime,
          summary: 'Chat creado con éxito',
          detail: '' + x,
        });
        this.router.navigate(['/chat/home']);
      });
    } else {
     this.messageService.add({
        severity: 'error',
       life: environment.modalTime,
      summary: 'Formulario incorrecto',
      detail:
         'Asegúrese de rellenar todos los campos respetando el formato.',
      });
    }
  }}

crearchat.component.spec.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { ComponentFixture, TestBed } from '@angular/core/testing';
 
import { CrearChatComponent } from './crearchat.component';
 
describe('CrearChatComponent', () => {
  let component: CrearChatComponent;
  let fixture: ComponentFixture<CrearChatComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CrearChatComponent ]
    })
    .compileComponents();
  });
 
  beforeEach(() => {
    fixture = TestBed.createComponent(CrearChatComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});


crearchat.module.ts

1
2
3
4
5
6
7
8
9
10
11
import { CrearChatComponent } from './crearchat.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { CrearChatRoutingModule } from './crearchat-routing.module';
 
@NgModule({
  declarations: [CrearChatComponent],
  imports: [CommonModule, CrearChatRoutingModule,ReactiveFormsModule],
})
export class CrearChatModule {}


Gracias de antemano por las respuestas
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder