首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 2中单击时,如何调整表或div的大小?

在Angular 2中,可以通过使用事件绑定和属性绑定来实现单击时调整表或div的大小。

  1. 首先,在HTML模板中,使用事件绑定将点击事件与一个方法绑定起来。例如,可以使用(click)来绑定onClick()方法:
代码语言:txt
复制
<button (click)="onClick()">点击我</button>
  1. 在组件的类中,定义onClick()方法,并在该方法中修改表或div的大小。可以通过修改CSS样式或动态绑定属性来实现大小调整。以下是两种常见的方法:
  2. a. 修改CSS样式:在组件的类中,定义一个变量来保存表或div的大小,然后在onClick()方法中修改该变量的值。在HTML模板中,使用属性绑定将该变量与表或div的样式绑定起来。例如:
  3. a. 修改CSS样式:在组件的类中,定义一个变量来保存表或div的大小,然后在onClick()方法中修改该变量的值。在HTML模板中,使用属性绑定将该变量与表或div的样式绑定起来。例如:
  4. b. 动态绑定属性:在组件的类中,定义一个变量来保存表或div的大小,然后在onClick()方法中修改该变量的值。在HTML模板中,使用属性绑定将该变量与表或div的属性绑定起来。例如:
  5. b. 动态绑定属性:在组件的类中,定义一个变量来保存表或div的大小,然后在onClick()方法中修改该变量的值。在HTML模板中,使用属性绑定将该变量与表或div的属性绑定起来。例如:

以上是在Angular 2中单击时调整表或div大小的方法。根据具体的需求和场景,可以选择适合的方法来实现大小调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

以下示例中,目标是按钮单击事件。...单击按钮可在最小/最大值限制内增加减小size,然后用调整大小触发(发出)sizeChange事件。...单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改后size值流向样式绑定,使显示文本变大变小。...当用户单击按钮Angular将$event值分配给AppComponent.fontSizePx。 显然,与单独属性和事件绑定相比,双向绑定语法相当方便。...当指令没有合适宿主元素如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加删除元素。

29.9K20

Angular 显示英雄列表

你可以本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式和样式都是局限于该组件。 ...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...Angular  CSS 类绑定机制让根据条件添加移除一个 CSS 类变得很容易。

4K30

Angular 显示英雄列表

你可以本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式和样式都是局限于该组件。 ...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。...所以你只要在用户点击一个  把 .selected 类应用到该元素上就可以了。 Angular  CSS 类绑定机制让根据条件添加移除一个 CSS 类变得很容易。

4.4K70

如何使用AngularJS和PHP为任何位置生成短而独特数字地址

MySQL中索引功能与它们百科全书其他参考工作中工作方式类似。...您应用程序发出包含查询WHERE声明,MySQL逐行读取每列中每个条目,这可能成为一个资源密集程度极高过程,因为您累积了越来越多条目。...如果您再次浏览器中访问该应用程序,则不会看到其外观行为任何新变化。同样,如果您要输入地址并单击“ 生成”按钮,则应用程序仍然不会生成显示地图代码。...每当用户单击Generate按钮,index.php文件中代码都会提交表单并调用该processForm函数,该函数以下createDigitalAddressApp.js位置定义: . . ....然而,关闭之前,让我们快速浏览一下这些文件如何协同工作。 当用户提交表单,它会触发一个submit事件,并且事件监听器会调用该fetchadd函数: . . .

13.1K20

AngularDart4.0 指南- 表单 顶

模板驱动形式 您可以通过使用本页中描述特定于表单指令和技术Angular模板语法中编写模板来构建表单。 您也可以使用响应式(模型驱动)方法来构建表单。...你还没有使用Angular。 没有绑定额外指令,只是布局。 模板驱动表单中,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...Angular可不使用Bootstrap类任何外部库样式。 Angular应用程序可以使用任何CSS库不使用。...如果您忽略原始状态,则只有该值有效才会隐藏该消息。 如果您使用新(空白)英雄无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息。...提交标志变为真,表格消失。 您将看到表格中显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮,该消失,并且可编辑表单重新出现。

17.4K30

AngularDart 4.0 高级-生命周期钩子 顶

Angular提供生命周期挂钩,提供这些关键生命时刻可视性以及发生行为能力。 指令具有相同生命周期挂钩集,减去特定于组件内容和视图挂钩。...开发人员可以通过Angular core库中实现一个多个Lifecycle Hook界面来挖掘该生命周期中关键时刻。 每个接口都有一个单一钩子方法,其名称是以ng开头接口名称。...ngDoCheck 检测Angular无法无法自行检测到更改并采取相应措施。 每次更改检测运行期间,立即在ngOnChanges和ngOnInit之后调用。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下name属性)构造没有分配值。

6.1K10

AngularDart4.0 英雄之旅-教程-07路由 顶

英雄名字将显示相同方式。 主要变化是如何得到英雄名字。...要在其他地方导航,用户可以单击AppComponent中两个链接之一,单击浏览器后退按钮。...应该显示英雄11详细信息。 仪表板英雄列表中选择英雄不起作用。 你会接下来处理。...当用户从列表中选择一个英雄,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整详细信息页面。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择英雄细节。

17.5K30

AngularDart4.0 英雄之旅-教程-08HTTP 顶

这与@Component注解中提供者列表具有相同效果。 注意:除非您有适当配置后端服务器(模拟服务器),否则此应用程序不起作用。 下一节将展示如何模拟与后端服务器交互。...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试英雄详情视图中编辑英雄名字。 当你输入时,英雄名字视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...()方法之外,删除按钮单击处理程序代码会停止单击事件传播 - 您不希望触发 click处理程序,因为这样做会选择用户将要删除英雄 。...当用户搜索框中输入一个名字,你会对这个名字过滤英雄进行重复HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务器Web API。...您配置了内存中Web API。 您了解了如何使用Streams。

11K30

如何使用纯前端控件集 WijmoJS 中可视化在线设计器

注意:设计图面上所有纯前端控件均以设计模式显示,这意味着您无法直接对其进行滚动,调整大小或以其他方式操作,而是使用页面右侧“属性”窗格来操作控件对象模型。...WijmoJS 在线Web设计器目前仅支持生成纯Java代码,并不依赖于任何特定框架,如jQueryAngular。...如果要将此代码部署到公共服务器,则可以在此处插入应用程序WijmoJS许可证密钥。这两个赋值语句标记上调用相应WijmoJS构造函数。...请注意,它具有latestPrice绑定值,对应于数据源中实际字段名称。 name属性(图表图例中显示)具有适当大小写和单词之间空格。...,以便您可以了解应用程序中使用实际数据进行部署实际图表外观。

5.8K20

【17】进大厂必须掌握面试题-50个Angular面试

Angular组件具有离散生命周期,其中包含从出生到死亡过渡不同阶段。为了更好地控制这些阶段,我们可以使用以下方法将其连接: 构造函数: 通过类上调用new创建组件指令将调用它。...当Angular找到ng-app指令,它将加载与其关联模块,然后编译DOM。 手动引导: 手动引导为您提供了有关如何以及何时初始化Angular应用程序更多控制。...高级水平–面试问题 46.Angular中,描述如何设置,获取和清除cookie?..._template, {fromContext: 'John'}); } } 50.如何仅通过单击角形按钮即可隐藏HTML元素?...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素,以单击按钮隐藏HTML元素。

41.1K51

AngularDart4.0 指南 原

教程 一步一步,沉浸式学习Angular方法,应用程序上下文中介绍Angular主要功能与特点。 高级 Angular特征和开发实践深入分析。 API 每个Angular详细细节。...示例代码 每个页面都包含页面随附示例应用程序代码段。 您可以应用程序中重用这些片段。 参考页 词汇定义Angular开发人员应该知道术语。...(任何其他 有效包名称) 5.单击克隆。...当您保存更新代码,该pub工具会检测更改并提供新应用程序。 学习Angular      你不必阅读文档,如果你是初学者,下方是建议学习步骤。     1....4.阅读数据显示以查看数据绑定是否屏幕上放置组件属性值。     5.阅读用户输入,了解如何响应用户启动DOM事件。

2.7K20

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

用户设计器中进行更改后,只需单击一下,就可以使用修改后Angular标记更新原始HTML文件。...我们示例中,操作是单独选项卡中打开设计图面,并使用 Angular标记提供上下文,以及源文件中该标记位置。 现在单击链接以相邻选项卡中打开设计器。...设计图面上FlexGrid 表格控件以设计模式显示,这意味着您无法直接对其进行滚动,调整大小或以其他方式操作行为,而是使用设计器右侧“属性”窗格来操作控件对象模型。...请注意,修改后Angular标记会突出显示,设计器中所做更改现在会反映在标记中。此时,您可以保存放弃更改,就像您自己键入更改一样。...在这种情况下,设计器以斜体显示只读文本框中绑定。 保存操作期间保留绑定事件; 但是,设计器中没有用于创建编辑它们界面。

5.3K40

AngularDart 4.0 高级-管道 顶

API参考管道主题中了解更多关于这些和许多其他内置管道信息; 过滤包含单词“管道”条目。 由于本页附录中解释了Angular没有FilterPipeOrderByPipe原因。...(查看源代码):添加飞行英雄,它们都不会显示“飞翔英雄”下。...当你不能,你可以使用不纯管道。 或者你可能根本不使用管道。 用组件属性来追求管道目的可能会更好,这点在本页稍后会讨论。 不纯管道 Angular每个组件更改检测周期执行不纯管道。...您可以实例(查看源代码)中确认,当您添加英雄,即使您变更heroes列表,飞行英雄也会显示更新。 不纯AsyncPipe Angular AsyncPipe是一个不纯管道有趣例子。...当Angular每秒钟多次调用这些管道方法,即使是中等大小列表,用户体验也会严重降级。 filter和orderBy经常被滥用在Angular 1应用程序中,导致投诉Angular本身很慢。

6.3K20

开始使用-安装 顶

Dependency Injection指南中你学会了基础Angular依赖注入. Angular有一个层级依赖注入 系统. 实际上是一个与组件树相平行注入器树....注入器树 依赖注入指南中, 学会了如何配置依赖注入器和在需要如何重新获取依赖对象. 事实上,这里没有像注入器这样东西....注入器冒泡 当一个组件请求依赖, Angular尝试使用组件自己注入器中注册过提供者满足依赖....组件注入器 能够不同级别配置一个多个提供商开辟了有趣和有用可能性。 场景:服务 隔离建筑学思路引导你限制访问应用程序服务所属域名....方案需要依赖Angular 其它特性和技术,你可以文档其它地方学到. 你可以live example (view source)预览和下载.

73810

如何插入 Visio 中粘贴 Excel 工作

如果您想链接 Excel 工作,请单击 粘贴链接 。 如果要为绘图中图标显示 Excel 工作单击以选中 显示为图标 复选框。...适合 Visio 绘图页 Excel 工作 loadTOCNode(2, 'summary'); 插入粘贴到您 Visio 绘图一个现有的大型 Excel 工作, 工作部分可能会显示超出...若要调整到绘图页 Excel 工作,使用以下方法根据您具体情况之一: 调整绘图页大小。 若要调整绘图页,请请按 Ctrl,,然后拖动绘图页边缘,以便在工作适合绘图页中。...调整工作大小之前您嵌入工作,Visio 绘图中复制为图片在工作之前。 然后,粘贴图片以 Visio 绘图。 调整大小工作, 您会更改工作格式。...因此,您可能需要通过测试工作,您要在 Visio 绘图中显示工作中使用此方法之前尝试此方法。 要调整工作大小,请按下列步骤操作: 启动 Excel,然后打开所需工作

9.9K71
领券