Angular 6: ОШИБКА TypeError: Невозможно прочитать свойство afterClosed из неопределенного - PullRequest
Новая
       5

Angular 6: ОШИБКА TypeError: Невозможно прочитать свойство afterClosed из неопределенного

0 голосов
/ 04 февраля 2019

Я изучаю стековое приложение MEAN с угловой версией 6. Здесь я хочу обновить компонент после добавления нового клиента / автомобиля / водителя / бронирования или обновления нового клиента / автомобиля / водителя / бронирования.Но после добавления нового значения компонент, отображающий все значения, не обновляется и не обновляется (не может видеть текущее значение в это время), но когда я перенаправляю между компонентами, а затем возвращаюсь к тому же компоненту, он обновляет и показываетвсе значения.

Я использую afterClosed метод MATDialog, чтобы вернуть все значения клиентов, но есть ошибка Ошибка: невозможночитать свойство 'afterClosed' из неопределенного

Как его решить?

Вот файл client ts. 

import {Component,OnInit} from '@angular/core';
import {MatDialog,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
import { IClient} from './client';
import {Router,ActivatedRoute} from '@angular/router';
import {ToastrService} from 'ngx-toastr';

import {AddClientComponent} from './add-client/add-client.component';
import {EditClientComponent} from './edit-client/edit-client.component';

import {DialogService} from '../../dialog.service';
import {ClientService} from './client.service';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  public currentClient: IClient;
  clients: any;
  Client: any;

  addClientDialogRef: MatDialogRef < AddClientComponent > ;
  editClientDialogRef: MatDialogRef < EditClientComponent > ;

  constructor(public dialog: MatDialog,
    private dialogService: DialogService,
    private clientService: ClientService,
    private router: Router) {}

  openAddClientDialog() {
    this.dialogService.open(AddClientComponent, {
      width: '500px'
    });

  }

  openEditClientDialog(id) {
    this.dialogService.open(EditClientComponent, {
      width: '500px',
      data: {
        'id': id
      }
    })
  }

  closeAll() {
    this.addClientDialogRef.afterClosed().subscribe(() => {
      this.getAllClients();
    });
  }

  ngOnInit() {
    this.closeAll();
    this.getAllClients();
  }

  getAllClients() {
    this.clientService.getClients().subscribe((res) => {
      console.log(res);
      this.clients = res;
    }, err => {
      console.log(err);
    });
  }

  deleteClient(id) {
    this.clientService.deleteClient(id)
      .subscribe(res => {
        this.router.navigate(['./clients']);
        this.ngOnInit();
      }, (err) => {
        console.log(err);
      });
  }


}

1 Ответ

0 голосов
/ 04 февраля 2019

Чтобы иметь возможность ссылаться на события, такие как afterClosed() в ссылках диалога, необходимо сохранить результат open() в соответствующих ссылках: 

// ...

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  public currentClient: IClient;
  clients: any;
  Client: any;

  addClientDialogRef: MatDialogRef<AddClientComponent>;
  editClientDialogRef: MatDialogRef<EditClientComponent>;

  constructor(public dialog: MatDialog,
    private dialogService: DialogService,
    private clientService: ClientService,
    private router: Router) { }

  openAddClientDialog() {
    this.addClientDialogRef = this.dialogService.open(AddClientComponent, {
      width: '500px'
    });
  }

  openEditClientDialog(id) {
    this.editClientDialogRef = this.dialogService.open(EditClientComponent, {
      width: '500px',
      data: { 'id': id }
    })
  }

  closeAll() {
    this.addClientDialogRef.afterClosed().subscribe(() => {
      this.getAllClients();
    });
  }

  // ...
}

Надеюсь, это поможет!

...