要实现这个需求,可以使用Angular的事件绑定和属性绑定功能。以下是一个示例代码,展示如何在Angular 10中实现这个功能。
首先,在组件的HTML模板中,创建一个按钮和一个模态框,并将按钮的点击事件绑定到一个方法上,该方法会更新模态框中的数据。模态框的显示状态可以使用一个布尔类型的属性来控制。
模态框
{{ modalData }}
接下来,在组件的TypeScript代码中,定义一个属性来存储模态框的显示状态和数据。在按钮的点击事件处理方法中,更新模态框的数据,并将显示状态设置为true。
import { Component } from '@angular/core';
@Component({
selector: 'app-modal-example',
templateUrl: './modal-example.component.html',
styleUrls: ['./modal-example.component.css']
})
export class ModalExampleComponent {
showModal: boolean = false;
modalData: string = '';
updateModalData() {
// 更新模态框的数据
this.modalData = '正确的数据';
// 设置模态框的显示状态为true
this.showModal = true;
}
}
通过上述代码,当点击按钮时,模态框会显示正确的数据。需要注意的是,你可能还需要根据你的实际需求添加其他逻辑,例如关闭模态框等。