Angular模态框中的数据在数据更改后未刷新。
创始人
2024-10-28 15:31:43
0

问题描述: 在Angular模态框中,当数据发生更改后,模态框中的数据未刷新,导致显示的数据和实际数据不一致。

解决方法:

  1. 在模态框组件中,通过订阅数据变化事件来刷新数据。
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    
  `,
})
export class ModalComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data) {
      this.data = changes.data.currentValue;
    }
  }
}
  1. 在调用模态框的组件中,使用ngOnInit钩子函数来监听数据的变化并更新模态框的数据。
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-parent-component',
  template: `
    
  `,
})
export class ParentComponent implements OnInit {
  data: string;

  constructor(private modalService: NgbModal) {}

  ngOnInit() {
    // 监听数据变化并更新模态框的数据
    this.data = 'Initial data';
  }

  openModal() {
    const modalRef = this.modalService.open(ModalComponent);
    modalRef.componentInstance.data = this.data;
  }
}

通过以上两个步骤,即可在Angular模态框中实现数据的刷新和更新。

相关内容

热门资讯

第3分钟必备!新世界辅助器,河... 第3分钟必备!新世界辅助器,河洛杠次脚本开发(原来真的是有挂)-哔哩哔哩1)河洛杠次脚本开发辅助挂:...
第十分钟关于!宝宝游戏辅助器,... 第十分钟关于!宝宝游戏辅助器,约战平台辅助(竟然是真的挂)-哔哩哔哩所有人都在同一条线上,像星星一样...
8分钟普及!中至上饶510k有... 8分钟普及!中至上饶510k有没有挂车,多乐辅助器免费版(原来是真的挂)-哔哩哔哩1、全新机制【中至...
第1分钟揭幕!菠萝辅助器1.3... 第1分钟揭幕!菠萝辅助器1.3,微乐陕西三代自建房怎么提高胜率(本来真的有挂)-哔哩哔哩1、玩家可以...
九分钟揭幕!开心泉州辅助,78... 九分钟揭幕!开心泉州辅助,789大菠萝辅助(总是是真的挂)-哔哩哔哩1、完成开心泉州辅助透视辅助安装...
第十分钟外挂!钱塘十三水挂件有... 第十分钟外挂!钱塘十三水挂件有吗,欢聚水鱼辅助视频(总是有挂)-哔哩哔哩1、起透看视 钱塘十三水挂件...
第一分钟科普!如何正确安装广东... 第一分钟科普!如何正确安装广东雀神智能插件,小闲川南宜宾辅助(一贯真的是有挂)-哔哩哔哩如何正确安装...
第6分钟解迷!新二号辅助软件下... 第6分钟解迷!新二号辅助软件下载,海贝之城辅助器(一直是有挂)-哔哩哔哩进入游戏-大厅左侧-新手福利...
9分钟普及!互游辅助脚本,创思... 9分钟普及!互游辅助脚本,创思维激k辅助器(总是真的有挂)-哔哩哔哩在进入创思维激k辅助器辅助挂后,...
一分钟必备!桂林字牌辅助科技a... 一分钟必备!桂林字牌辅助科技app官方下载安装,斗棋联盟bug(其实有挂)-哔哩哔哩亲,关键说明,桂...