Angular17(2):angular项目中使用NG-ZORRO

1、使用Angular CLI创建空项目

 ng new angular-admin-web --style=scss

2、执行ng add ng-zorro-antd命令安装

(1)ng add ng-zorro-antd

在angular项目下运行命令 ng add ng-zorro-antd 跟随选项便可完成初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。

官网脚手架 | NG-ZORRO

 ng add ng-zorro-antd

(2)页面效果

3、手动安装

(1)安装依赖

npm install ng-zorro-antd --save

(2)引入样式

在src/styles.scss中引入基本样式

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.min.css";

4、在组建中按需引入模块使用

welcome.component.html

<button nz-button nzType="primary" (click)='clickHandle()'>按钮</button>
<input type="text" nz-input [(ngModel)]="inputValue" placeholder="请输入" />

welcome.component.ts

import { Component } from '@angular/core';
// 使用ngModel实现数据双向绑定需要引入该模块
import { FormsModule } from '@angular/forms';
// 引入所需模块
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';@Component({selector: 'app-welcome',standalone: true,imports: [ FormsModule, NzButtonModule, NzInputModule ],templateUrl: './welcome.component.html',styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent {inputValue = '';clickHandle() {console.log('click', this.inputValue);}}

注意:ngModel指令实现了表单元素(如输入框、复选框等)与应用程序数据之间的双向绑定。在angular中使用ngModel时,需要确保已经将FormsModule或ReactiveFormsModule导入到Angular的组件模块中。

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

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

相关文章

alist配合onlyoffice 实现在线预览

alist配合onlyoffice 实现在线预览 文章目录 alist配合onlyoffice 实现在线预览一、安装onlyoffice二、增加view.html文件三、安装nginx&#xff0c;并增加conf配置文件四、alist预览配置增加 一、安装onlyoffice 我是采用docker安装&#xff0c;采用的版本是7.2&#xff0c; …

Web网站攻击技术

文章目录 Web应用体系结构脆弱性分析HTTP协议安全问题Cookie的安全问题 常见Web应用攻击及防范SQL注入攻击及防范SQL注入原理 防御注入漏洞跨站脚本(XSS)攻击及防范跨站脚本(XSS)攻击原理 跨站脚本攻击类型储存式XSS反射式XSSDOM式XSS Cookie欺骗及防范CSRF攻击及防范防御CSRF攻…

每天五分钟深度学习PyTorch:Tensor张量的索引和切片

本文重点 有时候当我们拥有一个Tensor张量的时候,我们可能需要获取它某一维度的信息,那么此时我们就需要索引和切片的技术,它们可以帮助我们解决这些问题。 切片操作 a是四维的,然后默认是从第一维开始取,逗号表示取不同的维度 a[:2]表示第一维取0,1,后面三维取所有 …

【QT5】<总览三> QT常用控件

文章目录 前言 一、QWidget---界面 二、QPushButton---按钮 三、QRadioButton---单选按钮 四、QCheckBox---多选、三选按钮 五、margin&padding---边距控制 六、QHBoxLayout---水平布局 七、QVBoxLayout---垂直布局 八、QGridLayout---网格布局 九、QSplitter---…

【保姆级讲解Outlook邮箱的使用技巧】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

Mysql:通过一张表里的父子级,递归查询并且分组分级

表&#xff1a;gc_jzst_single_base 需求&#xff1a;要求返回这张表里符合条件的数据&#xff0c;且有父子级关系的&#xff0c;展示为同一组且分级&#xff0c;给后续业务调用 代码 WITH RECURSIVE t1 AS (SELECTsingle_id,old_build_single_id,single_name,bulid_code,1 A…

【iOS】UI学习(二)

目录 前言UIViewContorllerUIViewContorller基础UIViewContorller使用 定时器和视图移动UISwitch控件UIProgressView和UISlider总结 前言 本篇博客是笔者在学习UI部分内容时的成果和遇到的一些问题&#xff0c;既是我自己的学习笔记&#xff0c;也希望对你有帮助&#xff5e; …

jmeter常用的断言

包括&#xff08;Contains&#xff09;&#xff1a;响应内容包括需要匹配的内容即代表响应成功&#xff0c;支持正则表达式 匹配&#xff08;Matches&#xff09;&#xff1a;响应内容要完全匹配需要匹配的内容即代表响应成功&#xff0c;大小写不敏感&#xff0c;支持正则表达…

数据治理挑刺行动:深化治理,提升数据质量

在当今信息化社会&#xff0c;数据已经成为推动经济发展、社会进步的重要驱动力。然而&#xff0c;随着数据量的爆炸式增长&#xff0c;数据质量问题也日益凸显&#xff0c;给各行各业带来了不小的挑战。为了应对这一挑战&#xff0c;深化数据治理&#xff0c;提升数据质量已成…

python办公自动化——(二)替换PPT文档中图形数据-柱图

效果: 数据替换前 &#xff1a; 替换数据后&#xff1a; 实现代码 import collections.abc from pptx import Presentation from pptx.util import Cm,Pt import pyodbc import pandas as pd from pptx.chart.data impo…

游戏缺失xinput1_3.dll怎么修复,总结几种有效的修复方法

在现代科技日新月异的时代&#xff0c;电脑已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;由于各种原因&#xff0c;电脑可能会出现一些错误或问题&#xff0c;其中之一就是找不到xinput13.dll文件&#xff0c;这个问题会导致软件或者游戏无法正常启动运行&#xf…

安徽某高校数据挖掘作业6

1 根据附件中year文件&#xff0c;编辑Python程序绘制年销售总额分布条形图和年净利润分布条形图&#xff0c;附Python程序和图像。 2 根据附件中quarter和quarter_b文件&#xff0c;编辑Python程序绘制2018—2020年销售额和净利润折线图&#xff0c;附Python程序和图像。 3 …

深度学习 --- stanford cs231 编程作业(assignment1,Q2: SVM分类器)

stanford cs231 编程作业之SVM分类器 写在最前面&#xff1a; 深度学习&#xff0c;或者是广义上的任何学习&#xff0c;都是“行千里路”胜过“读万卷书”的学识。这两天光是学了斯坦福cs231n的一些基础理论&#xff0c;越往后学越觉得没什么。但听的云里雾里的地方也越来越多…

编译原理总结

编译器构成 1. 前端分析部分 1.1 词法分析 确定词性&#xff0c;输出为token序列 1.2 语法分析 识别短语 1.3 语义分析 分析短语在句子中的成分 IR中间代码生成 2. 机器无关代码优化 3. 后端综合部分 目标代码生成 机器相关代码优化 4. 其他 全局信息表 异常输出

开源VS闭源:大模型之争,究竟谁更胜一筹?

随着人工智能技术的快速发展&#xff0c;大模型作为其中的核心组件&#xff0c;已经引起了业界的广泛关注。在大模型的研发过程中&#xff0c;开源与闭源成为了两个备受争议的话题。究竟开源与闭源谁更好&#xff1f;本文将从多个角度进行深入分析&#xff0c;为大家揭示真相。…

FFA-Net:用于单图像去雾的特征融合注意力网络

摘要 论文链接&#xff1a;https://arxiv.org/pdf/1911.07559v2 在这篇论文中&#xff0c;我们提出了一种端到端的特征融合注意力网络&#xff08;FFA-Net&#xff09;来直接恢复无雾图像。FFA-Net架构由三个关键组件组成&#xff1a; 一种新颖的特征注意力&#xff08;FA&…

Spring Security 注册过滤器关键点与最佳实践

在 Spring Security 框架中&#xff0c;注册过滤器是实现身份验证和授权的关键组件。正确配置和使用注册过滤器对于确保应用程序的安全性至关重要。以下是一些关于 Spring Security 注册过滤器的注意事项和最佳实践。 过滤器链顺序&#xff1a; 注册过滤器通常位于过滤器链的末…

DRIVEN|15分的CNN+LightGBM怎么做特征分类,适用于转录组

说在前面 今天分享一篇做深度学习模型的文章&#xff0c;这是一篇软硬结合的研究&#xff0c;排除转换实体产品&#xff0c;我们做生信基础研究的可以学习模仿这个算法&#xff0c;适用且不局限于临床资料&#xff0c;转录组数据&#xff0c;GWAS数据。 今天给大家分享的一篇文…

鸿蒙轻内核M核源码分析系列七 动态内存Dynamic Memory

内存管理模块管理系统的内存资源&#xff0c;它是操作系统的核心模块之一&#xff0c;主要包括内存的初始化、分配以及释放。 在系统运行过程中&#xff0c;内存管理模块通过对内存的申请/释放来管理用户和OS对内存的使用&#xff0c;使内存的利用率和使用效率达到最优&#x…

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第四周) - 语言建模

语言建模 1. 统计语言模型2. N-gram语言建模 2.1. N-gram语言模型中的平滑处理 3. 语言模型评估4. 神经语言模型5. 循环神经网络 5.1. Vanilla RNN5.2. LSTM 1. 统计语言模型 统计语言模型旨在量化自然语言文本中序列的概率分布&#xff0c;即计算一个词序列&#xff08;如一…