Javascript 角度，如何使用基于布尔值的指令

我使用

ngFor

来显示不同的

按钮

。我需要在不同的按钮上使用指令，但不是全部

因此，我制定了以下代码：

<div *ngFor="let btn of btns">
  <button {{ btn.useDirective ? 'appMyDirective' : '' }} ></button>
</div>

但是我得到了这个错误

错误：模板分析错误： 意外关闭标签“按钮”。当标记已被另一个标记关闭时，可能会发生这种情况

---

您的语法无效。要归档您想要的内容，请执行以下操作：

<div *ngFor="let btn of btns">
  <button *ngIf="btn.useDirective" appMyDirective></button>
  <button *ngIf="!btn.useDirective"></button>
</div>

---

尝试使用下面的内容

<div *ngFor="let btn of btns">
  <button appMyDirective *ngIf="btn.useDirective"></button>
  <button *ngIf="!btn.useDirective"></button>
</div>

<代码> > P>更新你的指令，以状态为基础触发，考虑这个问题，没有更好的解决方案吗？我在btn上有很多属性/类/事件。我认为使用ngIf创建两个不同的标记和开关是非常难看的…是的，您可以创建一个扩展原始指令的指令，并接受一个布尔值作为值。向该指令发送一个输入，如果条件匹配，则执行该指令所做的操作，否则保留它。不要根据条件添加两个按钮。@MuruGan我使用其他组件已经使用的指令。使用同一指令，可以在不影响其他组件的情况下添加条件？可以。像下面的回答一样，我尝试了一下，但是没有效果，因为他已经在其他地方使用了指令，没有条件，我认为您应该将默认的
@Input
值设置为
true
。在进行实验后，似乎必须将条件设置为
if（this.appHello！==false）{…}
以便工作。不使用默认值，可能是因为
@Input
与指令名关联。当没有提供值时，该值设置为
未定义的
（或空字符串）。通常，如果（this.appHello）
，我会使用当前代码
，但是，因为默认值为空（这是falsy），我认为如果您想在默认情况下应用指令，您必须针对
false
进行测试。@ConnorsFan