Как перезагрузить / обновить шаблон компонента в Angular с помощью MatDialogRef - PullRequest
Новая
       57

Как перезагрузить / обновить шаблон компонента в Angular с помощью MatDialogRef

0 голосов
/ 20 июня 2020

У меня есть компонент управления пользователями (gestion-usuar ios), который отображает список со всеми пользователями. В этом компоненте есть кнопка для добавления нового пользователя. Нажатие на эту кнопку открывает модальное окно (новый компонент, nuevo-usuario-modal) с формой, которая заполняет его, и нажатие на кнопку сохранения, в котором модальное окно, передает этого нового пользователя компоненту управления пользователями. Он работает, но он не обновляет список пользователей динамически с новым пользователем. Я использую MatDialogRef.

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

nuevo-usuario-modal.component. html

<div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="cerrar()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form>
    <div class="form-group">
      <label for="dniCliente">DNI</label>
      <input id="dniCliente" class="form-control" name="dniCliente" [(ngModel)]="nuevoUsuario.dniCliente"> 
      <label for="nombre">Nombre</label>
      <input id="nombre" class="form-control" name="nombre" [(ngModel)]="nuevoUsuario.nombre">
      <label for="direccion">Direccion</label>
      <input id="direccion" class="form-control" name="direccion" [(ngModel)]="nuevoUsuario.direccion">
      <label for="email">Email</label>
      <input id="email" class="form-control" name="email" [(ngModel)]="nuevoUsuario.email">
      <label for="pwd">Contraseña</label>
      <input id="pwd" class="form-control" name="pwd" [(ngModel)]="nuevoUsuario.pwd">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" [mat-dialog-close]="nuevoUsuario" (click)="guardarUsuario()">Guardar</button>
</div>

nuevo-usuario-modal.component.ts 

import { Component, Output, EventEmitter,OnInit, ChangeDetectorRef, Inject } from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog';
import { IUsuario } from 'interfaces/iusuario';
import { UsuariosService } from '../usuarios.service';
import { DataService } from '../data.service';



@Component({
  selector: 'nuevo-usuario-modal',
  templateUrl: './nuevo-usuario-modal.component.html',
  styleUrls: ['./nuevo-usuario-modal.component.css']
})
export class NuevoUsuarioModalComponent implements OnInit {
  closeResult = '';
  title = "Nuevo cliente"

  usuarios: IUsuario[] = [];

  nuevoUsuario: IUsuario = {
    direccion: "",
    dniCliente: "",
    email: "",
    nombre: "",
    pwd: "",
  };


  constructor(public dialogRef: MatDialogRef<NuevoUsuarioModalComponent>,@Inject(MAT_DIALOG_DATA) public data,
   public ServicioUsuarios: UsuariosService,
    private dataService: DataService){}

  @Output() recargar = new EventEmitter();


  guardarUsuario() {

    this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() => {
      this.dataService.usuarios.push(this.nuevoUsuario);
      console.log(this.dataService.usuarios);
    });

  }

  cerrar() {
    this.dialogRef.close();
  }

  ngOnInit() {}


}

gestion-usuar ios .component. html

<div>
<p class="p-2">Gestión de usuarios <button type="button" class="btn btn-primary" (click)="abrirModalNuevoUsuario()">Nuevo usuario</button></p>
<div>
    <form class="form">
        <div class="col-sm-5">
        <input type="text" [(ngModel)]="filtro" class="form-control"
        name="filtroNombre" id="filtroNombre" placeholder="Filtrando por...">
        </div>
        </form>
</div>

<div *ngFor="let usuario of usuarios | nombreUsuarioFiltro:filtro" class="p-2 divUsuariosIndividual">
    <div class="p-2 m-2">{{usuario.dniCliente}}</div>
    <div class="p-2 m-2">{{usuario.nombre}}</div>
    <div class="p-2 m-2">{{usuario.direccion}}</div>
    <div class="p-2 m-2">{{usuario.email}}</div>
    <button type="button" class="btn btn-primary" (click) = "editar(usuario)">Editar</button>
    <button type="button" class="btn btn-danger" (click) = "borrar(usuario.dniCliente)" >Borrar</button>

</div>

gestion-usuar ios .component.ts 

import { Component, OnInit, Output,EventEmitter, OnChanges, ChangeDetectorRef } from '@angular/core';
import { UsuariosService } from '../usuarios.service';
import { IUsuario } from '../../../interfaces/iusuario';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';


import { NuevoUsuarioModalComponent } from '../nuevo-usuario-modal/nuevo-usuario-modal.component'
import { EditarUsuarioModalComponent } from '../editar-usuario-modal/editar-usuario-modal.component';
import { DataService } from '../data.service';

@Component({
  selector: 'gestion-usuarios',
  templateUrl: './gestion-usuarios.component.html',
  styleUrls: ['./gestion-usuarios.component.css']
})
export class GestionUsuariosComponent implements OnInit,OnChanges {

  filtro: string = '';
   u: IUsuario = {
    direccion: "",
    dniCliente: "",
    email: "",
    nombre: "",
    pwd: "",
  }

  constructor(
    public ServicioUsuarios: UsuariosService,
    private dialog: MatDialog,public dataServicio: DataService


  ) { }

  borrar(dniCliente): void {
    var confirmacion = confirm("¿Seguro que quieres eliminar el usuario?");
    if (confirmacion) {
       this.ServicioUsuarios.borrarCliente(dniCliente).subscribe(() => this.ServicioUsuarios.getUsuariosArray().subscribe(
        recibe => this.usuarios = recibe,
        error => console.log(error),
      ));
    }
  }

  abrirModalNuevoUsuario() {

    const dialogRef = this.dialog.open(NuevoUsuarioModalComponent);

    dialogRef.afterClosed().subscribe(result => {
    console.log(result);    
     this.usuarios.push(result);
     console.log(this.usuarios);

    })

  }

  editar(usuario) {
    this.dialog.open(EditarUsuarioModalComponent,{data: usuario});
  }

  usuarios: IUsuario[] = [];

  ngOnInit() {

    this.usuarios = this.dataServicio.getUsuarios();
    this.ServicioUsuarios.getUsuariosConsola();

    this.ServicioUsuarios.getUsuariosArray().subscribe(
      recibe => {
        this.usuarios = this.dataServicio.getUsuarios();

        this.usuarios = recibe;
      },
      error => console.log(error),
    );

  }

 ngOnChanges(){
   this.ngOnInit();
 }


}

data.service.ts 

import { Injectable, OnInit } from '@angular/core';
import { IUsuario } from 'interfaces/iusuario';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  usuarios: IUsuario[] = [];

  getUsuarios() {
    return this.usuarios;
  }


}

1 Ответ

0 голосов
/ 20 июня 2020

В этом файле: nuevo-usuario-modal.component.ts

Изменить: 

guardarUsuario() {

  this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() => {
    this.dataService.usuarios.push(this.nuevoUsuario);
    console.log(this.dataService.usuarios);
  });

}

на 

guardarUsuario() {

  this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(nuevoUsuar => {
    this.dialogRef.close(nuevoUsuar);
  });

}

Я предполагаю, что crearUsuario является конечная точка, которая должна возвращать пользователя после того, как она была вставлена ​​в базу данных. Передайте пользователя, указанного в ответе, обратно в dialogRef, на который вы подписываетесь.

...