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

在Angular 7中有条件地禁用ngFor中的按钮

在Angular 7中,可以通过使用ngIf指令来条件地禁用ngFor中的按钮。

ngFor是Angular中的一个结构指令,用于循环渲染一组元素。而ngIf是另一个结构指令,用于根据条件来添加或移除DOM元素。

要在ngFor中条件地禁用按钮,可以使用ngIf指令来包裹按钮,并设置一个条件表达式来控制按钮的显示与隐藏。当条件表达式为true时,按钮会显示,反之则隐藏。

以下是一个示例代码:

代码语言:txt
复制
<div *ngFor="let item of items">
  <button [disabled]="item.disabled" *ngIf="!item.disabled">按钮</button>
</div>

在上述代码中,ngFor循环遍历items数组,并为每个item渲染一个按钮。按钮的disabled属性通过item.disabled来设置,当item.disabled为true时,按钮会被禁用,反之则启用。

这样,你可以根据具体的条件来设置item.disabled的值,从而实现在ngFor中条件地禁用按钮的效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,并根据实际使用情况进行弹性调整。

产品介绍链接地址:https://cloud.tencent.com/product/cvm

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

相关·内容

AngularDart4.0 指南- 表单 顶

您可以创造性地设计控件,将它们绑定到数据,指定验证规则和显示验证错误,有条件启用或禁用特定控件,触发内置视觉反馈等等。 Angular通过许多重复,模板化任务使处理过程变得简单。...禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...您将在表单添加一个select,并使用ngFor(先前“显示数据”页面中看到一种技术)将选项绑定到powers列表。...使用name和类绑定来有条件分配适当表单有效性类。 临时将另一个名为spy模板引用变量添加到Name 标记,并使用它显示输入CSS类。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素上定义一个模板引用变量。 多处按钮引用该变量。

17.5K30

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件列表下方显示一条消息。...当这些属性改变时,Angular会更新显示。 更准确说,重新显示是与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。...Angular ngFor指令来显示英雄列表每个项目。...它正在添加和删除DOM段落元素。 这可以提高性能,特别是大型项目中,当有条件包含或排除大量HTML与许多数据绑定。 试试看。 由于列表中有四个项目,所以应该显示消息。...Dart类,用于为您组件生成模型数据并显示该模型属性。 ngIf有条件显示基于布尔表达式HTML块。

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

    以下示例有条件将字体大小设置为“em”和“%”单位。 <button [style.font-size.em]="isSpecial ?...<em>在</em>以下示例<em>中</em>,目标是<em>按钮</em><em>的</em>单击事件。...当指令没有合适<em>的</em>宿主元素时如何对元素进行分组。 如何编写自己<em>的</em>结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见<em>的</em>结构指令: NgIf:有<em>条件</em><em>地</em>从DOM<em>中</em>添加或删除元素。...它可以根据切换<em>条件</em>从几个可能<em>的</em>元素<em>中</em>显示一个元素。 <em>Angular</em>只把选中<em>的</em>元素放入DOM<em>中</em>。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件<em>的</em>onSubmit方法,您可以<em>禁用</em>提交<em>按钮</em>。

    30K20

    Angular快速学习笔记(3) -- 组件与模板

    显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定到 Angular 组件属性。...它是语法不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只特定情况下显示视图或视图一部分,这个时候使用ngif,同vue.js里v-if <p *ngIf="heroes.length...根据一个布尔表达式有<em>条件</em><em>地</em>显示一段 HTML。...事件绑定 可以通过 <em>Angular</em> 事件绑定来声明对哪些用户动作感兴趣 圆括号<em>中</em><em>的</em>名称 —— 比如 (click) —— 标记出目标事件。在下面例子<em>中</em>,目标是<em>按钮</em><em>的</em> click 事件。.../app.component.scss'] }) 6.属性指令 <em>在</em> <em>Angular</em> <em>中有</em>三种类型<em>的</em>指令: 组件 — 拥有模板<em>的</em>指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局<em>的</em>指令

    15.3K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    ng-if判断使用: //angular没有else只能都通过ng-if来判断 准备 进行...ng-dblclick 规定双击事件行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件行为 ng-form 指定 HTML 表单继承控制器表单 ng-hide 隐藏或显示...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 应用包含 HTML 文件 ng-init 定义应用初始化值...ng-mouseup 规定当在元素上松开鼠标按钮行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素 open 属性 ng-options 元素 srcset 属性 ng-style 指定元素 style 属性 ng-submit 规定 onsubmit 事件发生时执行表达式 ng-switch 规定显示或隐藏子元素条件

    5.3K41

    Angular 6.x 基础教程

    答案是项目根目录下 angular.json 文件,已经默认帮我们配置了默认前缀,具体如下: "angular6-fundamentals": { "root": "",...指令 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...当在 SimpleFormComponent 组件修改 input 输入框文本消息后,点击更新按钮,将会调用 AppComponent 组件类 onUpdate() 方法,更新对应信息。...第十节 - 组件样式 Angular ,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件内联样式和外联样式。...用过 AngularJS 1.x 同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态添加或移除对应样式。 Angular ,对应指令是 ngClass 。

    15.6K20

    Angular 结构指令模式 - 它们是什么且怎么使用

    Angular ,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。... Angular ,有三种标准结构化指令。...*ngIf - 根据表达式返回布尔值,有条件包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...要使用结构指令,我们需要在 HTML 模版添加一个带有指令元素。然后根据我们指令设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...typescript : Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认值,用于模块渲染满足条件特定元素。

    3.8K20

    ng-content 隐藏内容

    如果你尝试 Angular 编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...由于许多问题与Angular 组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器添加 ngIf 指令: import { Component } from '@angular/core';...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...你可以认为它等价于 node.appendChild(el)或 jQuery $(node).append(el) 方法:使用这些方法,节点不被克隆,它被简单移动到它新位置。

    2.7K30

    Angular4记账webApp练手项目之二(angular4项目中使用Angular WeUI)

    写在前面 angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们font-awesome图标苦,我们项目index.html引用 <a href="javascript:;" class="weui-grid" *ngFor="let b of...我选择固定中间按钮,使用动态绑定样式让中间部分高度等于页面高度-底部和顶部高度,设置overflo为scroll; accounting.component.ts添加样式数据如下: contentStyle...这里写图片描述 引用非样式组件 例如提示框组件 html添加元素 ts文件引入使用

    2.2K20

    Angular2 之 结构型指令几个概念

    隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定变更。... 移除元素组件 利 把ngIf设置为false,将会影响到组件资源消耗。angular会从DOM移除该元素,停止相关组件变更检测,把它从DOM事件移除,并且销毁组件。...Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段。... 这时候显示内容是'Hip! Hooray!',Angular控制下,DOM效果是不同。 ?...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。

    3K20

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

    你离开地方 在前一页,您学会了仪表板和固定英雄列表之间导航,沿途编辑选定英雄。 这是这个页面的起点。 继续英雄之旅之前,请确认您具有以下结构。 ?...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试英雄详情视图中编辑英雄名字。 当你输入时,英雄名字视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...添加保存英雄详情能力 英雄细节模板末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()新组件方法。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML,位于重复元素英雄名称之后。...仪表板搜索框输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?

    11K30

    Angular 6.x 快速入门

    第二节 - 插值表达式 Angular ,我们可以使用插值语法实现数据绑定。...基础知识 定义组件元信息 Angular ,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x ng-repeat 指令功能是等价。...2.x', 'Angular 4.x', 'Angular 6.x']; } } 第五节 - 事件绑定 Angular ,我们可以通过 (eventName) 语法,实现事件绑定。

    14.1K20
    领券