Angular 如何根据单击的文本启用、禁用按钮？

我正在显示映射到布尔数据类型的整数。我创建了一个click函数，它改变了一个局部变量，我用这个局部变量将它与按钮的disabled属性绑定在一起。它确实有效。如果值为false，则每个按钮都被禁用，为true，每个按钮都被启用，但我希望根据整数禁用和启用按钮

我需要更改单击功能，可能还需要更改映射，但我不知道该怎么做

在app.component.html中，我有以下代码：

<p *ngFor="let item of items" (click)="buttonStatus(item)">
  {{ statusMap[item.status] }} </p>
<button [disabled]="!isValid">Button1</button>
<button [disabled]="!isValid">Button2</button>
<button [disabled]="!isValid">Button3</button>

所以每个按钮要么被禁用，要么被启用，但我想根据item.status的整数启用和禁用一些按钮。例如： 单击状态为1的项目，第一个和第三个按钮应被禁用，但第二个按钮应保持启用状态

---

我感谢你的帮助！很抱歉，我不得不在app.component.html中显示“我有以下代码：”和“在app.component.ts中”，因为这个论坛的新结构。

您不能使用

isValid

来启用和禁用不同的按钮。如果

isValid

为true，它将根据模板代码启用所有按钮。 您应该有一个功能调用从您的按钮检查状态

<p *ngFor="let item of items" (click)="buttonStatus(item)">
  {{ statusMap[item.status] }} </p>
<button [disabled]="checkStatus('1')">Button1</button>
<button [disabled]="checkStatus('2')">Button2</button>
<button [disabled]="checkStatus('3')">Button3</button>

---

不能使用

isValid

启用和禁用不同的按钮。如果

isValid

为true，它将根据模板代码启用所有按钮。 您应该有一个功能调用从您的按钮检查状态

<p *ngFor="let item of items" (click)="buttonStatus(item)">
  {{ statusMap[item.status] }} </p>
<button [disabled]="checkStatus('1')">Button1</button>
<button [disabled]="checkStatus('2')">Button2</button>
<button [disabled]="checkStatus('3')">Button3</button>

---

我不确定我是否完全理解问题的背景。然而，这可能会有所帮助

您可以使用公共属性跟踪选中的按钮，然后在模板中为每个按钮检查该属性，以确定是否应启用该属性。单击处理程序函数可以设置属性

<p *ngFor="let item of items" (click)="buttonStatus(item)">
    {{ statusMap[item.status] }} </p>
<button [disabled]="{{enabler!=1}}" (click)=clickHandler(1)">Button1</button>
<button [disabled]="{{enabler!=2}}" (click)=clickHandler(2)>Button2</button>
<button [disabled]="{{enabler!=3}}" (click)=clickHandler(3)>Button3</button>

public enabler: int;
public clickHandler(selectedCheckbox: int) {
    enabler = selectedCheckbox;
}

{{statusMap[item.status]}

我不确定我是否完全理解问题的背景。然而，这可能会有所帮助

您可以使用公共属性跟踪选中的按钮，然后在模板中为每个按钮检查该属性，以确定是否应启用该属性。单击处理程序函数可以设置属性

<p *ngFor="let item of items" (click)="buttonStatus(item)">
    {{ statusMap[item.status] }} </p>
<button [disabled]="{{enabler!=1}}" (click)=clickHandler(1)">Button1</button>
<button [disabled]="{{enabler!=2}}" (click)=clickHandler(2)>Button2</button>
<button [disabled]="{{enabler!=3}}" (click)=clickHandler(3)>Button3</button>

public enabler: int;
public clickHandler(selectedCheckbox: int) {
    enabler = selectedCheckbox;
}


{{statusMap[item.status]}

谢谢你的快速回答。我会努力理解你的代码！因为你们并没有改变按钮点击的状态，那个点击事件其实并不需要。嗯，这只是一个例子。稍后单击li标记应检查整型变量。根据整数的不同，有些按钮应该更改，有些则不更改。因此，使用此代码将无法工作..~这真的是必须提到的。检查值，在本例中为整数，然后决定应禁用哪个按钮。我想了解如何实现这一点的逻辑。你的想法是基于你所分享的问题。您需要根据您的要求修改代码，我将尝试获取逻辑！顺其自然吧，谢谢你的新观点！谢谢你的快速回答。我会努力理解你的代码！因为你们并没有改变按钮点击的状态，那个点击事件其实并不需要。嗯，这只是一个例子。稍后单击li标记应检查整型变量。根据整数的不同，有些按钮应该更改，有些则不更改。因此，使用此代码将无法工作..~这真的是必须提到的。检查值，在本例中为整数，然后决定应禁用哪个按钮。我想了解如何实现这一点的逻辑。你的想法是基于你所分享的问题。您需要根据您的要求修改代码，我将尝试获取逻辑！顺其自然吧，谢谢你的新观点！有一点是不明确的，如果“禁用”取决于状态整数，则单击该项与否无关。请在此澄清您的要求。是的，没错，点击按钮没有任何作用。我不知道它背后的真正意图是什么。@wannadream稍后将介绍按钮的作用，但这取决于按钮是否可以单击的状态。我试着模拟它。现在没有操作一件事是不明确的，如果“禁用”取决于状态整数，则单击该项与否无关。请在此澄清您的要求。是的，没错，点击按钮没有任何作用。我不知道它背后的真正意图是什么。@wannadream稍后将介绍按钮的作用，但这取决于按钮是否可以单击的状态。我试着模拟它。现在没有操作了
myproperty
在这里做什么？我在你的代码中没有看到它？由于问题没有涉及clickHandler，因此不需要clickHandler。这显示了一种处理设置禁用属性的替代方法，基于一些不明确的要求。这里的
myproperty
在做什么？我在你的代码中没有看到它？由于问题没有涉及clickHandler，因此不需要clickHandler。这显示了一种处理设置禁用属性的替代方法，基于一些不明确的要求。