动态禁用 ngfor 中的子按钮组件

Question

我有一个组件来动态管理按钮组。主要目的是获取一个组件来控制按钮的点击事件和启用/禁用状态，不仅在它们被渲染时，我需要在很多情况下更改disabled 属性。每次我根据页面要求（父组件要求）在任何页面上包含组件时，情况都会有所不同。这个想法是在@input 中使用 JSON 来提供数据。我有点击事件工作，但我需要知道如何管理启用/禁用操作。最初我不知道每种情况下可以有多少个按钮。

这是子组件的模板：

<div class="dynamic-button-group-container">
  <div *ngFor="let btnDefinition of buttonGroupDefinitions">
    <button
      [disabled]="btnDefinition.disabled"
      (click)="btnDefinition.action()"
    >
      {{ btnDefinition.text }}
    </button>
  </div>
</div>

这里的问题是[disabled]="btnDefinition.disabled" 只是被渲染并且永远不会再改变

这里是子组件的相关脚本：

@Input() buttonGroupDefinitions!: ButtonGroupDefinitions [];

这是我想动态管理动作的父组件（请记住，我们的想法是在应用程序的许多地方使用子组件来满足不同的要求：

<app-dynamic-button-group [buttonGroupDefinitions]="buttonGroupDefinitions">

这是一个json的例子：

this.buttonGroupDefinitions = [
      {
        text: "name1",
        action: this.something1,
        disabled: true
      },
      {
        text: "name2",
        action: this.something2,
        disabled: false
      },
      {
        text: "name3",
        action: this.something3,
        disabled: false
      }
    ]

在父组件中，我将从这样的事件中采取行动：

something3() {
    //This could do anything and works fine
    //Maybe this can disable the name2 button and enable the name1
}

Answer 1

这不是一个完整的带有代码的遮阳篷，我现在有点忙。

您可以做的是调整您的 JSON 文件以适应这些更改。 您可以将按钮组添加在一起，例如红色按钮、绿色按钮，而不是仅仅定义按钮。

{"buttons": {
"green": {
    "text": "Sample Konfabulator Widget",
    "action": "main_window",
    "disabled": false
},
"red": { 
    "text": "Images/Sun.png",
    "action": "this.something()",
    "disabled": false
}

}}

父母会将这些变成对象

class Model {
   text: string;
   action : your action;
   disabled : boolean;
}

现在您可以编写一个循环遍历按钮的函数，将绿色和红色保存为键值，当单击红色按钮时，您将能够告知这一点并根据此执行您的条件。

你想传递变量而不是你从 github 或你的 api 获得的 json。您希望动态更改这些值。就像启用或禁用按钮一样。

Answer 2

You can not get click event by disabling button.
You can handle this from your function
For Example:

<div class="dynamic-button-group-container">
  <div *ngFor="let btnDefinition of buttonGroupDefinitions;let i=index">
    <button
      (click)="onButtonClick(i)"
    >
      {{ btnDefinition.text }}
    </button>
  </div>
</div>

  @Output() selectedValueEmit = new EventEmitter();
  public onButtonClick(index: any): void {
    this.selectedValueEmit.emit(index);
  }


<app-dynamic-button-group [buttonGroupDefinitions]="buttonGroupDefinitions"
(selectedValueEmit)="onButtonClick($event)"
>
 onButtonClick(index: number): void {
    switch (index) {
      case '0':
        this.something1();
        break;
      case '1':
        this.something2();
        break;`enter code here`
    }
  }