从 ng-bootstrap Modal 中删除后使用新数据重新加载组件

凯尔·斯科特

我试图理解一些概念,并想看看是否有人可以提供帮助。我有一个 ng-bootstrap 模式,显示了从父组件中进行的 API 调用输入的一些信息。基本上,我在这个模式中显示数据,我能够点击删除路线来删除一些记录。这一切都很好,但我遇到的问题是当我关闭模态时,我希望父组件刷新而不显示刚从模态中删除的记录,所以基本上再次运行请求并更新信息,但我不知道如何做到这一点。我相信这通常可以用事件发射器来完成,但我被卡住了,因为我是从模态并使用 ng-bootstrap 来做这件事的。任何帮助理解这一点将不胜感激!

这是我的代码:

应用程序.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>

应用程序:

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;
    })
  }  
}

详细信息-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>

详细信息-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();
    })
  }

}

显然从this GitHub post,你可以做到这一点

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ng-bootstrap modal在单元测试中失败

来自分类Dev

Bootstrap Modal无法加载

来自分类Dev

Bootstrap Modal中的中心形式

来自分类Dev

ASP的Bootstrap Modal中的问题

来自分类Dev

Bootstrap Modal在ipad中消失

来自分类Dev

Bootstrap Modal使用数据映像作为源

来自分类Dev

如何动态加载 Modal 的内容(Bootstrap 4)

来自分类Dev

5秒后弹出Bootstrap Modal窗口

来自分类Dev

在Bootstrap Modal中避免额外的事件调用

来自分类Dev

Twitter Bootstrap 3 Modal中的jQuery Datepicker

来自分类Dev

Firefox中的Bootstrap Modal不起作用

来自分类Dev

Durandal 2.0.1中的bootstrap 3 modal

来自分类Dev

Twitter Bootstrap 3 Modal中的jQuery Datepicker

来自分类Dev

无法在Bootstrap Modal中读取$ scope

来自分类Dev

Bootstrap Modal刷新Web表单中的页面

来自分类Dev

Bootstrap modal在3.3.6中不起作用

来自分类Dev

Bootstrap Modal中的固定元素不滚动

来自分类Dev

Bootstrap Modal Angular 2 中的 iFrame

来自分类Dev

无法在 bootstrap Modal 中显示 div

来自分类Dev

prestashop 1.6使用Bootstrap插件-Modal

来自分类Dev

使用Bootstrap Modal表单添加功能无效

来自分类Dev

使用启动Bootstrap Modal的按钮提交

来自分类Dev

使用锚标签打开Bootstrap Modal

来自分类Dev

从ng-bootstrap表中删除行

来自分类Dev

在 angular 4 中使用 bootstrap 4 或 ng-bootstrap 组件

来自分类Dev

bootstrap-modal.js在Bootstrap 3中损坏

来自分类Dev

无法将数据从PHP + JQuery加载到Bootstrap 3 Modal

来自分类Dev

如何避免Twitter Bootstrap Modal组件中的ENTER键行为

来自分类Dev

具有动态ng-modal数据的角形提交