javascript - Angular，如何使用基于 bool 值的指令

Question

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

所以我编写了这段代码:

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

但我收到此错误

Error: Template parse errors: Unexpected closing tag "button". It may happen when the tag has already been closed by another tag.

Answer 1

更新您的指令以根据状态触发作为示例，请考虑这一点 👇

@Directive({
  selector: '[appHello]'
})
export class HelloDirective {

    @Input() appHello:boolean;

    constructor(private elem: ElementRef, private renderer: Renderer2) { }

    ngAfterViewInit() {
      if (this.appHello !== false ) {
         this.renderer.setProperty(this.elem.nativeElement, 'innerHTML', 'Hi 😎');
      }
    }

}

模板

<div *ngFor="let btn of btns">
  <button [appHello]="btn.useDirective">Hi </button>
</div>

如果您将该值设置为 true，该指令将起作用，否则什么也不会发生

demo 🔥🔥