Javascript 在ngIf条件下禁用/启用ngFor内的多个按钮

我有一个按钮列表，需要根据条件立即启用/禁用，可能会禁用两个或三个按钮

<li *ngFor="let button of buttons; let i = index">
   <button *ngIf="disableButtonIndex  && i+1 == disableButtonIndex" class="btn btn-lg btn-primary" disabled> {{ button.title }}</button>
   <button *ngIf="!(disableButtonIndex  && i+1 == disableButtonIndex)" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

---

如果可以使用[disabled]=“expressionToEvaluate”，那么如何禁用两个/多个按钮而不是*ngi

{{button.title}}
{{button.title}}

如果您可以使用[disabled]=“expressionToEvaluate”代替*ngi

{{button.title}}
{{button.title}}

我认为您的问题在于li元素中的下一次迭代按钮

您可以将所有禁用按钮索引存储在一个数组中，并检查数组中是否存在当前索引

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonArr.indexOf((i+1)) === -1" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

{{button.title}}

我认为您的问题在于li元素中的下一次迭代按钮

您可以将所有禁用按钮索引存储在一个数组中，并检查数组中是否存在当前索引

<li *ngFor="let button of buttons; let i = index">
   <button [disabled]="disableButtonArr.indexOf((i+1)) === -1" (click)="callAction(button.actionName || i)" class="btn btn-lg btn-primary">{{ button.title }}</button>
</li>

{{button.title}}

您可以使用数组保存禁用的索引或在按钮选项中添加禁用标志

使用禁用的数组

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
禁用按钮=[1,2]
按钮=[
{
actionName:'action1'，
标题：“按钮1”
},
{
actionName:'action2'，
标题：“按钮2”
},
{
actionName:'action3'，
标题：“按钮3”
}
]
呼叫行动（行动）{
console.log（操作）
}
}

{{button.title}}

在选项中使用标志

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
按钮=[
{
actionName:'action1'，
标题：“按钮1”，
残疾人士：对
},
{
actionName:'action2'，
标题：“按钮2”，
残疾人士：对
},
{
actionName:'action3'，
标题：“按钮3”，
禁用：false
}
]
呼叫行动（行动）{
console.log（操作）
}
}

{{button.title}}

您可以使用数组保存禁用的索引或在按钮选项中添加禁用标志

使用禁用的数组

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
禁用按钮=[1,2]
按钮=[
{
actionName:'action1'，
标题：“按钮1”
},
{
actionName:'action2'，
标题：“按钮2”
},
{
actionName:'action3'，
标题：“按钮3”
}
]
呼叫行动（行动）{
console.log（操作）
}
}

{{button.title}}

在选项中使用标志

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
按钮=[
{
actionName:'action1'，
标题：“按钮1”，
残疾人士：对
},
{
actionName:'action2'，
标题：“按钮2”，
残疾人士：对
},
{
actionName:'action3'，
标题：“按钮3”，
禁用：false
}
]
呼叫行动（行动）{
console.log（操作）
}
}

{{button.title}}

谢谢，但该功能会导致禁用单个按钮的结果相同。正确的做法是只禁用一个按钮，因为这两个表达式正好相反。对，如何禁用循环中的多个按钮？谢谢，但该功能会导致禁用单个按钮的结果相同。正确的做法是只禁用一个按钮，因为这两个表达式正好相反。对，我如何禁用循环中的多个按钮？是否

disablebuttonnindex

应该有多个索引？是的，但是如何？它是动态的吗？@developer033不是动态的，disableButtonIndex可以是单个按钮禁用的条件。我可以传递一个值来处理。在这种情况下，如何禁用多个按钮？disableButtonIndex是否应该有多个索引？是的，但如何？它是动态的吗？@developer033不是动态的，disableButtonIndex可以是单个按钮禁用的条件，我可以传递一个值来处理。在这种情况下，如何禁用多个按钮？不确定OP想要的是什么，因为我仍然不明白，但是作为建议，您可以避免在模板中调用

函数，例如：
disabledButtons.indexOf（i）！==-1“
。相反，您可以创建一个
对象来映射禁用的按钮，如下所示：
readonly disabledButtonsMapper={1:true，2:false，3:true}；
并且在模板中：
[disabled]=“disabledButtonsMapper[i]
。不确定这是OP想要的，因为我仍然没有得到它，但是作为一个建议，您可以避免在模板中调用
函数，如下所示：
禁用按钮。indexOf（i）！=-1“
。相反，您可以创建一个
对象来映射禁用的按钮，如下所示：
readonly disabledButtonsMapper={1:true，2:false，3:true}；
并且在模板中：
[disabled]=“disabledButtonsMapper[i]
。