首页
学习
活动
专区
工具
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生成的按钮都会被禁用。

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

相关·内容

3分6秒

如何在Mac版Photoshop中去除图片中的水印?

36秒

PS使用教程:如何在Mac版Photoshop中画出对称的图案?

22秒

PS使用教程:如何在Mac版Photoshop中新建A4纸?

34秒

PS使用教程:如何在Photoshop中合并可见图层?

1分6秒

PS使用教程:如何在Mac版Photoshop中制作“3D”立体文字?

领券