andrular输入框input监听值传递

效果图·:
在这里插入图片描述

step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html
<button mat-button (click)=“openDialog()”>Open dialog

step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts

import {Component, inject} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';
import {DialogContentExampleDialog} from './DialogContentExampleDialog';
import {async} from 'rxjs';@Component({selector: 'app-apple',standalone: true,imports: [MatButton, MatButtonModule, MatDialogModule],templateUrl: './apple.component.html',styleUrl: './apple.component.css'
})
export class AppleComponent {readonly dialog = inject(MatDialog);openDialog() {// const dialogRef = this.dialog.open(DialogContentExampleDialog);const dialogRef = this.dialog.open(DialogContentExampleDialog, {data: {url:'https://www.baidu.com',id:101},maxWidth: '100vw',panelClass: 'full-width-dialog',});/*
*     dialogRef.afterClosed().subscribe(async (result: AddMediaDialogData) => {if (!result || !result.url) {return;}
* */dialogRef.afterClosed().subscribe(result => {console.log(`Dialog result: ${result}`);});}}

step3: E:\projectgood\ajnine\untitled4\src\app\apple\dialog-content-example-dialog.html

<p style="width: 900px;" mat-dialog-title>商品修改</p>
<p style="margin-left: 20px;">{{ this.data.id }}</p><mat-form-field style="margin-left: 20px;margin-top: 10px;margin-right: 20px"><input matInput placeholder="请输入position" [(ngModel)]="dialogData.position">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入name" [(ngModel)]="dialogData.name">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入icon" [(ngModel)]="dialogData.icon">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入phone" [(ngModel)]="dialogData.phone">
</mat-form-field>
<mat-form-field style="margin-left: 20px;margin-right: 20px"><input matInput placeholder="请输入address" [(ngModel)]="dialogData.address">
</mat-form-field><button style="margin-left:20px;background: red;color: white;margin-bottom: 10px;width: 120px;" mat-button (click)="getLoginClick('测试数据456')">登录</button><button mat-flat-button [mat-dialog-close]="this.dialogData" color="primary">Add</button>

step4: E:\projectgood\ajnine\untitled4\src\app\apple\DialogContentExampleDialog.ts

import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {FormsModule} from '@angular/forms';
import {MatFormField} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';@Component({selector: 'dialog-content-example-dialog',templateUrl: 'dialog-content-example-dialog.html',standalone: true,imports: [MatDialogModule, MatButtonModule, FormsModule, MatFormField, MatInput],changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogContentExampleDialog implements OnInit{cancelString :string=''sureString :string=''testString :string=''todos: Todo[] = [];/** {"position": "772024102801","name": "雨林","icon": "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg","phone": "13952141236","address": "成都市双流区华阳时代广场a栋701室"}* */dialogData: Todo = {position: '772024102801', name: '雨林', icon: 'http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg', phone: '13952141236', address: '成都市双流区华阳时代广场a栋701室'};protected readonly names = names;constructor(public dialogRef: MatDialogRef<AddMediaDialogData>, @Inject(MAT_DIALOG_DATA) public data: AddMediaDialogData) {}getClick(name: string) {console.log('you click this button')console.log(name)names = name}getLoginClick(name: string) {console.log(this.dialogData.position)console.log(this.dialogData.name)console.log(this.dialogData.icon)console.log(this.dialogData.phone)console.log(this.dialogData.address)console.log(this.data.id)this.dialogRef.close();}animal() {return names}ngOnInit(): void {this.cancelString="鲨鱼哟"this.sureString="昊昊超体"this.testString="测试超体"}onNoClick(): void {console.log(this.data.url)// this.data.url = '';this.dialogRef.close();}}export interface AddMediaDialogData {url: string;id: number;
}var names = ''interface Todo {position: string;name: string;icon: string;phone: string;address: string;
}/*
{"position": "772024102801","name": "雨林","icon": "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg","phone": "13952141236","address": "成都市双流区华阳时代广场a栋701室"}一共五个输入内容输入位置输入名称输入icon输入phone输入地址
* */

end

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

考公人数攀升?地信、测绘、地质、遥感等专业,能报考哪些单位

近年来&#xff0c;考公人数持续飙升&#xff0c;国考报名人数更逐年攀升。2025年国家公务员考试共有341.6万人通过资格审查&#xff0c;报录比达86:1。国考报名人数再创新高。 国家公务员考试时间安排 地理学相关岗位分析 地信属于地理科学类&#xff0c;测绘类中不包括地信&…

Git操作命令

Git操作命令 1、删除未加入git的文件 1、删除未加入git的文件 D:\Idea_Workspace\rightcloud-v397\rightcloud-schedule>git clean -f -d -n Would remove src/main/java/cn/com/cloudstar/rightcloud/schedule/system/task/push/S.java Would remove src/main/java/cn/com…

如何设置定时关闭或启动整个docker而不是某个容器

如果你想定时关闭和启动整个Docker服务&#xff0c;而不是单个容器&#xff0c;可以使用系统级别的定时任务&#xff08;如Cron&#xff09;来实现。以下是如何操作的具体步骤&#xff1a; 使用Cron来定时关闭和启动Docker服务 打开Cron表: 打开终端。输入 crontab -e 编辑当前…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

24-11-1-读书笔记(三十一)-《契诃夫文集》(五)下([俄] 契诃夫 [译] 汝龙)生活乏味但不乏魅力。

文章目录 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。目录阅读笔记总结 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。 休息&#xff0c…

戴尔电脑 Bios 如何进入?Dell Bios 进入 Bios 快捷键是什么?

BIOS&#xff08;基本输入输出系统&#xff09;是计算机启动时运行的第一个程序&#xff0c;它负责初始化硬件并加载操作系统。对于戴尔电脑用户来说&#xff0c;有时可能需要进入 BIOS 进行一些特定的设置调整&#xff0c;比如更改启动顺序、调整性能选项或解决硬件兼容性问题…

rediss数据结构及其底层实现

Redis 是一个基于内存的高性能键值对数据库&#xff0c;它支持多种数据结构&#xff0c;每种数据结构都有其特定的底层实现。以下是Redis中一些主要数据结构及其底层实现&#xff1a; 字符串&#xff08;String&#xff09;&#xff1a; Redis的字符串类型使用简单动态字符串&a…

如何正确进行activemq服务搭建及性能调优?

引言 ActiveMQ是一个开源的消息中间件&#xff0c;广泛应用于企业级应用中&#xff0c;以实现异步通信和解耦。 随着分布式系统和微服务架构的普及&#xff0c;消息中间件的需求日益增加。 本文将详细介绍如何正确搭建ActiveMQ&#xff0c;并进行性能调优&#xff0c;以满足…

【C++】内存管理(二):operator new/delete

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解C的operator new/delete&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1 new/delete的底层2 new/delete的底层调用顺序3 delete[ ]调用析构函数的次数…

transformers 框架使用详解,bert-base-chinese

以 bert-base-chinese 模型为例&#xff0c;模型目录 model_name "C:/Users/Administrator.DESKTOP-TPJL4TC/.cache/modelscope/hub/tiansz/bert-base-chinese" bert-base-chinese 模型大小只有400多兆&#xff0c;参数的量级在百万级别&#xff0c;与现在动辄几十…

acmessl.cn提供接口API方式申请免费ssl证书

目录 一、前沿 二、API接口文档 1、证书可申请列表 简要描述 请求URL 请求方式 返回参数说明 备注 2、证书申请 简要描述 请求URL 请求方式 业务参数 返回示例 返回参数说明 备注 3、证书查询 简要描述 请求URL 请求方式 业务参数 返回参数说明 备注 4、证…

使用 JWT 实现安全认证的技术详解

一、概述 **JWT&#xff08;Json Web Token&#xff09;** 是一种用于安全地在客户端和服务器之间传递信息的机制。JWT 在网络应用环境中扮演重要角色&#xff0c;特别适合用于分布式系统中的单点登录&#xff08;SSO&#xff09;&#xff0c;实现跨站点、跨应用的身份验证。 …

【那些年踩过的坑-前端篇- Mac版本】npm init vite 失败,报错`CERT_HAS_EXPIRED npm ERR

CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to htt 开发中vue3项目执行npm init vite 命令报错了&#xff0c;vite 需要node.js版本> 12.0.0 beiluobeiluodeMBP vue3-demo % node -v v16.13.0 beiluobeiluodeMBP vue3-demo % npm init vite npm E…

问:Redis常见性能问题及解法?

Redis 作为一个高性能的键值存储系统&#xff0c;在实际应用中可能会遇到各种性能问题。本文将探讨 Redis 的常见性能问题&#xff0c;并提供相应的解决建议。主要针对五个关键问题进行讨论&#xff1a;Master 节点的持久化工作、Slave 节点的数据备份、主从复制的网络环境、主…

【docker】docker 环境配置及安装

本文介绍基于 官方存储库 docker 的环境配置、安装、代理配置、卸载等相关内容。 官方安装文档说明&#xff1a;https://docs.docker.com/engine/install/ubuntu/ 虚拟机环境 Ubuntu 20.04.6 LTS 安装步骤 添加相关依赖 sudo apt-get update sudo apt-get install ca-certifi…

机器学习在时间序列预测中的应用与实现——以电力负荷预测为例(附代码)

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 随着数据采集技术的发展&#xff0c;时间序列数据在各个领域中的应用越来越广泛。时间序列预测旨在基于过去的时间数据来…

uniapp+vue加油服务系统 微信小程序

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 基于微信小程序的加油服务系统设计为微信小程序和后台管理两个服务端&#xff0c;并对此设计相应的功能模块如下&#x…

uniapp使用后会打开很多导航栏

在uniapp中&#xff0c;如果遇到打开过多的导航栏&#xff0c;很可能是因为在页面跳转时没有正确管理导航记录。为了避免这个问题&#xff0c;可以使用uni.navigateBack()来关闭当前页面并返回上一页面&#xff0c;或者使用uni.reLaunch()或uni.redirectTo()来关闭所有页面并跳…

大数据新视界 -- 大数据大厂之 Impala 资源管理:并发控制的策略与技巧(下)(6/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Linux(CentOS)设置防火墙开放8080端口,运行jar包,接收请求

1、查看防火墙状态 systemctl status firewalld 防火墙开启状态 2、运行 jar 包&#xff0c;使用8080端口 程序正常启动 3、使用 postman 发送请求&#xff0c;失败 4、检查端口是否开放&#xff08;需更换到 root 用户&#xff09; firewall-cmd --zonepublic --query-por…