在Angular 7中禁用Bootstrap 4按钮组数组中的单击按钮,可以通过以下步骤实现:
<div class="btn-group">
<button *ngFor="let button of buttonArray; let i = index"
type="button"
class="btn"
[ngClass]="{'disabled': button.disabled}"
(click)="handleButtonClick(i)">
{{ button.label }}
</button>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-button-group',
templateUrl: './button-group.component.html',
styleUrls: ['./button-group.component.css']
})
export class ButtonGroupComponent {
buttonArray = [
{ label: 'Button 1', disabled: false },
{ label: 'Button 2', disabled: false },
{ label: 'Button 3', disabled: false }
];
handleButtonClick(index: number): void {
// 根据需要禁用或启用特定按钮
this.buttonArray[index].disabled = true;
}
}
在上述示例中,按钮组数组buttonArray
包含了三个按钮对象,每个对象都有一个label
属性和一个disabled
属性。通过在点击事件处理程序中修改disabled
属性的值,可以禁用或启用特定按钮。
这样,当点击按钮时,对应的按钮会被禁用,并且添加了"disabled"类,使其在外观上呈现禁用状态。
请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。关于Angular和Bootstrap的更多信息,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云