在Angular 7中有条件地禁用ngFor中的按钮
在Angular 7中，可以通过使用ngIf指令来条件地禁用ngFor中的按钮。
ngFor是Angular中的一个结构指令，用于循环渲染一组元素。而ngIf是另一个结构指令，用于根据条件来添加或移除DOM元素。
要在ngFor中条件地禁用按钮，可以使用ngIf指令来包裹按钮，并设置一个条件表达式来控制按钮的显示与隐藏。当条件表达式为true时，按钮会显示，反之则隐藏。
以下是一个示例代码：
<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
相关·内容
我正在尝试禁用登录用户投票的按钮，但是，当我在ngFor中使用disabled指令时(在下面的示例中)，所有按钮都被禁用，而不仅仅是包括登录用户的项目。我的目标是检查数组中是否包含当前用户的uid，如果包含，则禁用该按钮。我如何才能做到这一点？return { id, ...data }; );
浏览 22提问于2019-05-02得票数 2
实际上，我正在尝试在任务运行时禁用该按钮。一旦任务加载完成，我想激活按钮。意味着同步图标在任务状态为“In_progress”时平行旋转，一旦状态更改为“Completed”，微调器应隐藏，而按钮“AutoCode sync”应被激活。那么如何实现这一点呢？为此，我编写了以下代码： <nav>
<span class="text-warning
浏览 2提问于2018-11-12得票数 1
angular-cli的ng版本创建了3个文件：vendor.bundle.js并且每个人都有一个地图文件。干什么用?我也在问是否有办法改变这种行为，不创建这3个文件，而是将所有js文件复制到dist目录，而不是捆绑任何东西。这有可能吗？
浏览 1提问于2017-02-09得票数 17
回答已采纳
这是我的按键：如何根据选择表单是否被选中来控制它并使其禁用这是我的字段表单： <mat-select placeholder="Select customer"><
浏览 1提问于2018-03-02得票数 38
我正在尝试启用一个按钮，如果客户输入一定数量的字，但禁用它，如果他们的字数不满足。 我开始只是简单地使用字符长度，而不是使用"if“"else”条件的单词，但无法获得所需的结果。我在一个文本区域元素中使用了"ng-model“，但是每次我刷新页面时，它总是在已经键入的文本区域中有"true”或"false“，并且当我删除它时，它总是
浏览 21提问于2019-06-18得票数 0
回答已采纳
我只想简单地有条件地呈现按钮，而不是在花括号中呈现{{allcode}}。我来自react世界，感觉真的很奇怪。如何做到这一点？Angular代码--但它仍然不能工作： <td *ngFor="let column of requestColumns"> row[column.value] === "Allow
浏览 23提问于2020-06-18得票数 0
回答已采纳
我的项目在Angular 9中，我正在使用反应式表单，我在表单中有Angular材质单选按钮组(垫-单选-按钮)，我选中了默认值，并且在我的表单中不需要单选控件，因为我选择了默认值。现在我的表单验证了单选按钮，我必须选择一个选项，如果我不选择一个单选选项，我的保存按钮将保持禁用。 compon
浏览 54提问于2020-07-12得票数 0
3回答
我有一个按钮列表，需要根据一次条件启用/禁用，可能会禁用两个或三个按钮。<li *ngFor="let button of buttons; let i = index">
<button *ngIf="disableButtonIndex && i+1 == disableButtonIndex="btn btn-lg btn-primary">{{ button.title }
浏览 1提问于2020-03-24得票数 1
回答已采纳
我有一个显示数组信息的按钮组，我想在点击时禁用其中一个按钮列表。我如何实现这一点。
*ngFor</e
浏览 10提问于2019-03-27得票数 0
回答已采纳
Angular:有条件地触发选择性表单验证 我使用了一个带有验证的反应式表单-- 'required‘和其他的表单字段，比如min，max等。表单中有两个按钮-“保存”和“提交”。保存和提交按钮上的事件会将数据保存到中间状态，并根据后端逻辑分别提交。 对于Submit按钮，我已经禁用了它，直到表单通过属性绑定disabled属性到表单的invalid状态时才生效。对于Sa
浏览 38提问于2019-03-09得票数 0
回答已采纳
我在一个循环中有许多复选框，我需要使用Angular.js限制使用某些条件的复选框。让我先分享一下。只有两个复选框可以从7日的整个表中选中。我还需要在点击store按钮后，两个带有各自行下拉数据的复选框值应该获取到控制器的侧函数<em
浏览 2提问于2016-05-26得票数 1
回答已采纳
2回答
这位身材魁梧的新手。过去几个小时，我一直在尝试实现动态创建选项卡的能力。我开始使用材料设计，但我仍然不能做到这一点，也不知道我在哪里犯了这个错误。import {Component, OnInit} from '@angular/core';
import {Tab} from ".addTab()
浏览 5提问于2017-04-05得票数 3
回答已采纳
1回答
我试图通过没有任何条件地按下按钮来禁用它，但我不能。是一个离子角度的计划。我的html: <button ion-button #a (click)="letraIntroducida('a')">a</button>My：
import { Component } from '@
浏览 0提问于2019-03-27得票数 0
回答已采纳
2回答
"attribute4": "value4", "attribute6": "value6", "attribute8": "value8"它可能存储在公共属性"iHaveAVeryLongButRea
浏览 0提问于2019-02-15得票数 2
1回答
我使用可视化编辑器中Screens下的Actions子菜单向Inventory Receipts菜单添加了一个报告菜单项，如下所示。我想根据收款交易的状态，从报表列表中禁用/启用此报表项目。*是我想要达到的结果。Base.report不再有效。报告在2021R1中不再是一个选择。如何在2021R1中实现这一目标？ ?
浏览 24提问于2021-10-27得票数 0
我已经为表数据的每一行添加了一个多选下拉菜单，用户可以使用该下拉菜单更改选择并保存它。 ts(typescript)文件中多选下拉菜单的设置。现在我想根据一些用户条件在一些行中禁用dropdown。但是更改设置(disable属性为true)将禁用表中的所有下拉列表。 我正在使用并遵循下面的git示例。https://cuppalabs.github.io/angular</em
浏览 18提问于2020-12-22得票数 0
回答已采纳
使用ngFor遍历项目数组，我希望索引为偶数的项目与索引为奇数的项目具有不同的背景颜色。我使用下面的代码在VueJs中实现了这一点： 我试过下面的Angular Code，没有成功： <ion-col *ngFor="let item of [].constructor(50); let(i % 2)}">
</ion-col> VueJs Cod
浏览 29提问于2019-06-05得票数 0
回答已采纳
所以，这是我与离子和角度的第一个项目。我相信我正在做一件非常简单的事情，但它不会起作用。在我的mips.page.ts中，我声明：在mips.page.html中，我可以执行以下操作：并得到正确的输出"bla“。但当我尝试时：
浏览 0提问于2019-03-21得票数 0
我需要能够以编程方式向导航栏添加按钮。这段代码应该通过使用某种模板(在Angular 2中)或通过代码(typescript)添加到页面(在<ion-navbar>中)。primary" #hduiBtn> </button>我发现ng-in
浏览 1提问于2017-04-14得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
