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

如何禁用所有来自ngFor的按钮,除了在angular 8中被点击的按钮

在Angular 8中,可以通过以下步骤禁用除当前被点击按钮外的所有ngFor生成的按钮:

  1. 在组件的HTML模板中,使用ngFor指令生成按钮,并为每个按钮添加一个点击事件处理函数,例如:
代码语言:txt
复制
<button *ngFor="let item of items; let i = index" (click)="onClickButton(i)" [disabled]="isButtonDisabled(i)">
  {{ item }}
</button>
  1. 在组件的Typescript文件中,定义一个变量来跟踪当前被点击的按钮的索引,并创建一个函数来判断按钮是否应该被禁用,例如:
代码语言:txt
复制
export class YourComponent {
  items: string[] = ['Button 1', 'Button 2', 'Button 3'];
  clickedButtonIndex: number;

  onClickButton(index: number) {
    this.clickedButtonIndex = index;
  }

  isButtonDisabled(index: number): boolean {
    return index !== this.clickedButtonIndex;
  }
}

在上述代码中,items是一个包含按钮文本的数组。clickedButtonIndex变量用于跟踪当前被点击的按钮的索引。onClickButton函数在按钮被点击时将被点击的按钮的索引赋值给clickedButtonIndexisButtonDisabled函数用于判断按钮是否应该被禁用,如果按钮的索引与clickedButtonIndex不相等,则返回true,否则返回false

这样,除了当前被点击的按钮,其他由ngFor生成的按钮都会被禁用。

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

相关·内容

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

他们输入框中输入文字。 他们从列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:从元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...以下示例中,目标是按钮单击事件。...Angular中你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...Angular所有基本HTML表单元素提供值访问器,Forms指南展示了如何绑定到它们。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件onSubmit方法,您可以禁用提交按钮

30K20

AngularDart4.0 指南- 表单 顶

禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库中,该库位于其自己包中。...继续看看这是如何工作。 刷新浏览器。 你会看到一个简单,没有样式表单。 表单样式 一般CSS类container和btn来自Bootstrap。...model.power = _powers[0]; model.alterEgo = ''; } 提交按钮后面添加一个带有点击事件绑定清除按钮:lib/src/hero_form_component.html...点击清除按钮。 文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够填写表单后提交这个表单。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素上定义一个模板引用变量。 多处按钮中引用该变量。

17.5K30
  • 使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    这些服务也被称作“providers”将被放置一个providers文件夹。 现在,只有一个HomePage组件,设置一个虚拟视图。我们应用程序中我们要修改这个来显示所有待办事项列表。...我们可以构造函数上面声明变量,像上面这样使其成员变量 member variables,这意味着他们可以通过引用this.myVal整个类中被被访问,同时,它也将在您模板中可用。...我们设计一个按钮使用。因为这里有个end属性,按钮将被放置end位置。...不同属性行为可能会有所不同,取决于什么平台上运行,以iOS为例,将end会将按钮放到导航栏右边。...,然后entryComponents和declarations数组中被声明。

    6.1K50

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

    现成示例(查看源代码)演示了本指南中描述所有语法和代码片段。 模板中HTML HTML是Angular模板语言。 几乎所有的HTML语法都是有效模板语法。...它是一个事件全部。 就是如何从用户操作更新应用程序状态。 响应事件是Angular“单向数据流”另一面。事件循环这个周期中,您可以自由地在任何地方进行所有更改。...当您添加disabled属性(Attributes)时,它存在会将按钮disabled属性(Properties)初始化为true,因此该按钮禁用。...添加和删除disabled属性(Attributes)将禁用和启用该按钮。...设置按钮disabled属性(Properties)(例如,使用Angular绑定)禁用或启用按钮。属性(Properties)值很重要。

    5.1K10

    Angular 显示英雄列表

    它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义那个。...添加如下 onSelect() 方法,它会把模板中被点击英雄赋值给组件 selectedHero 属性。...如果用户点击了“Magneta”,这个英雄应该用一个略有不同背景色显示出来,就像这样: 所选英雄颜色来自于你前面添加样式中 CSS 类 .selected。

    4.4K70

    Angular 显示英雄列表

    它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式中定义那个。...添加如下 onSelect() 方法,它会把模板中被点击英雄赋值给组件 selectedHero 属性。...给所选英雄添加样式 所有的  元素看起来都是一样,因此很难从列表中识别出所选英雄。 如果用户点击了“Magneta”,这个英雄应该用一个略有不同背景色显示出来,就像这样: ?...所选英雄颜色来自于你前面添加样式中 CSS 类 .selected。 所以你只要在用户点击一个  时把 .selected 类应用到该元素上就可以了。

    4K30

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

    添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...由于路由器自己包中,首先将该包添加到应用pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立可选软件包中原因。...这个举动创建了一个单例HeroService实例,可用于应用程序所有组件。 Angular注入HeroService,您可以DashboardComponent中使用它。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。...刷新浏览器并开始点击。 用户可以应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。

    17.6K30

    【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

    还有就是Angular推崇是面向对象编程范式,Angular里面的几乎一切都是类和对象,除了刚才一经介绍模块和组件,还有服务(Service)、管道(Pipe)等,都是类(class)。...onChange事件是Pagination组件页码改变事件,当点击上一个/下一页翻页按钮时执行,该事件中可获取到当前页码current。...5.3 Angular版本 5.1.1 实现通用按钮组件 最后来看下Angular如何实现分页功能,思路都一样,先定义一个通用按钮组件button.component.ts: import { Component...另外需要考虑页码少情况,如果只有8页怎么显示呢? 很简单,直接去掉右边更多按钮就好: ? 如果当前页码第4页呢?去掉左边更多按钮,显示右边更多按钮即可: ? 以上就是全部页码显示策略。...接下来看看React/Angular如何实现分页器吧。

    7.8K00

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

    /wendellhu95/blog/issues/10 https://zhuanlan.zhihu.com/p/36385830 Angular教程_Angular8 Angular9入门实战视频教程.../guide/built-in-directives#ngModel 8、插值语法 {{...}}: 花括号之间文本通常是组件属性名字。...元素使用 CSS 类 ng-class-even 类似 ng-class,但只偶数行起作用 ng-class-odd 类似 ng-class,但只奇数行起作用 ng-click 定义元素被点击行为...ng-dblclick 规定双击事件行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件行为 ng-form 指定 HTML 表单继承控制器表单 ng-hide 隐藏或显示...ng-mouseup 规定当在元素上松开鼠标按钮行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素 open 属性 ng-options <select

    5.3K41

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

    写在前面 angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 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

    2.2K20

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

    其他生命周期挂钩 其他Angular子系统除了这些组件钩子可能有自己生命周期钩子。 例如,路由器也有自己路由器生命周期挂钩,可以让我们利用路由导航中特定时刻。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...如果用户点击Update Hero按钮,日志会显示另一个OnChanges和两个更多DoCheck,AfterContentChecked和AfterViewChecked三元组。...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们间谍指令。...它告诉Angular在哪里插入该内容。 在这种情况下,投影内容是来自父级。 ?

    6.2K10

    Angular教程】-组件初识|8月更文挑战

    组件相关其他文件暂时先放一放,Vue开发时候我们创建好组件总是要挂载后才能使用,那angular需要挂载吗?...' + event.type); } 组件html模板中添加一个按钮来触发print函数 触发一下 双向绑定 双向绑定构成...@Inout()装饰器来接收数据,通过@Output装饰器来派发数据来达到双向数据流通 组件ts代码(代码来自angular中文网): export class SizerComponent {...+this.size + delta)); this.sizeChange.emit(this.size); } } 组件html模板代码(代码来自angular中文网): ...,要不然功能无法实现 此时页面恢复正常,通过输入框中更新内容,页面绑定数据同时更新 管道 angular管道与Vue中过滤器雷同,均可以使数据按指定格式进行显示,同样使用管道符来操作 内置管道

    1.9K20

    Angular快速学习笔记(2) -- 架构

    0. angularangular js angular 1.0 google改名为Angular js 新版本,2.0以上,继续叫angular,但是除了名字还叫angular,已经是一个全新开发框架了...Angular 库中导入 Angular 模块: import { BrowserModule } from '@angular/platform-browser' 在上面这个简单根模块范例中,应用根模块需要来自...Angular 每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树根部开始,递归处理全部子组件。 ?...你可以模块中或者组件中注册这些提供商。 - 当你往根模块中添加服务提供商时,服务同一个实例会服务于你应用中所有组件。...它工作模型基于人们熟知浏览器导航约定: 地址栏输入 URL,浏览器就会导航到相应页面 页面中点击链接,浏览器就会导航到一个新页面 点击浏览器前进和后退按钮,浏览器就会在你浏览历史中向前或向后导航

    5.3K20

    AngularDart4.0 指南- 用户输入 顶

    用户操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。 运行实例(查看源代码)。... 等号左边(click)标识按钮点击事件作为绑定目标。 等号右边引号中文本是模板语句,它通过调用组件onClickMe()方法来响应click事件。...; } 当用户点击按钮时,Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...现在,把它放在一个微型应用程序,可以显示英雄列表,并添加新英雄列表。 用户可以通过输入框中输入英雄名字并点击添加来添加英雄。 ? 下面是“英雄之旅”组件。...第二个语句newHero.value =''英雄添加到列表后清除输入框。 源代码 这里是在这个页面中讨论所有代码。

    3.5K00

    AngularDart 4.0 高级-管道 顶

    toggle; } } 当您点击按钮时,显示日期“04/15/1988”和“Friday, April 15, 1988”之间交替。 ?...从技术上讲,这是可选; 无论角度如何Angular都会查找并执行transform方法。 现在您需要一个组件来演示管道。...如果你点击reset按钮Angular用原有英雄新列表替换heroes并更新显示。 如果您添加了删除或更改英雄功能,Angular会检测这些更改并更新显示。...纯净管道 仅当Angular检测到对输入值纯粹更改时才执行纯管道。 AngularDart中,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart中对象)。...虽然有些人可能并不在意这种积极态度,但Angular产品不应该阻止任何人积极贬低。 因此,Angular团队决定Angular提供所有内容都将安全地缩小。

    6.4K20

    Angular 6.x 快速入门

    基础知识 定义组件元信息 Angular 中,我们可以使用 Component 装饰器来定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件...name = 'Angular'; } 定义数据接口 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...Angular 实际项目中,最常用指令是 ngIf 和 ngFor 指令。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...当我们点击以上任意链接时,页面不会被重新加载。

    14.1K20
    领券