Перезагрузите компонент с новыми данными после удаления из ng-bootstrap Modal - PullRequest
Новая
       48

Перезагрузите компонент с новыми данными после удаления из ng-bootstrap Modal

0 голосов
/ 02 декабря 2018

Я пытаюсь понять некоторые концепции и хотел посмотреть, сможет ли кто-нибудь помочь.У меня есть модальное окно ng-bootstrap, отображающее некоторую информацию, которая вводится из вызова API, выполняемого в родительском компоненте.По сути, я отображаю данные в этом модальном режиме и могу выбрать маршрут удаления, чтобы удалить некоторые записи.Это все нормально, но у меня возникает проблема, когда я закрываю модальное окно, я хочу, чтобы родительский компонент обновлял, а не отображал записи, которые были только что удалены из модального, поэтому в основном выполняю запрос снова и обновляю информацию, но яне уверен, как это сделать.Я полагаю, что обычно это можно сделать с помощью генератора событий, но я застрял, потому что я делаю это из модального режима и использую ng-bootstrap.Любая помощь в понимании этого будет высоко ценится!

Вот мой код:

app.html: 

<div>
  <ul>
    <li *ngFor="let user of users">{{user.first_name}}</li>
  </ul>
    <button (click)="openFormModal()" class="btn btn-primary btn-sm">view more</button>
</div>

app.ts: 

export class AppComponent {
  users: any;

  constructor(private api: ApiService,
    private modalService: NgbModal) {}

    ngOnInit() {
    this.getUsers();
  }

openFormModal(){
    const modalRef = this.modalService.open(DetailsModalComponent);
    modalRef.componentInstance.users = this.users;

    modalRef.result.then((result)=> {
        console.log(result);
    }).catch((error) => {
        console.log(error);
    });
}

  getUsers() {
    this.api.getUsers().subscribe(data => {
        this.users = data;
    })
  }  
}

details-modal.html: 

  <div class="modal-header">
  <h4 class="modal-title">Modal Title</h4>
  <button type="button" class="close" aria-label="Close"
   (click)="closeModal()">
  </button>
</div>
<div class="modal-body">
  <p *ngFor="let user of users">{{user.first_name}} <span (click)="deleteUser(this.user.id)" style="cursor: pointer">DELETE</span></p>
</div>
<div class="modal-footer">
  <button (click)="closeModal()">
    Close Clicked
  </button>
</div>

details-modal.ts: 

@Component({
  selector: 'app-details-modal',
  templateUrl: './details-modal.component.html',
  styleUrls: ['./details-modal.component.css']
})
export class DetailsModalComponent implements OnInit {
  @Input() users;

  constructor(
    public activeModal: NgbActiveModal,
    private api: ApiService
  ) {}

  ngOnInit() {
  }

  fetch() {
    this.api.getUsers().subscribe(data => {
      this.users = data;
    })
  }

  closeModal() {
    this.activeModal.close()
  }

  deleteUser(id) {
    this.api.deleteUser(id).subscribe(data => {
      this.fetch();
    })
  }

}

1 Ответ

0 голосов
/ 02 декабря 2018

Как видно из этого сообщения GitHub , вы можете сделать это 

modalRef.result.then(
  () => {
     console.log("Close button clicked");
     // actions
  },
  ()=> {
     console.log("Close icon clicked or backdrop clicked");
     // actions
});

Stackblitz: https://stackblitz.com/edit/angular-ey8hkm

...