Question

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

所以我编写了这段代码：

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

但我收到此错误

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

Answer 1

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

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

Answer 2

将您的指令更新为基于状态触发为例，请考虑此

@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 ??

Answer 3

请尝试使用下面的内容。

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

Angular，如何使用基于布尔的指令

3 个答案: