Angular, как использовать директиву на основе логического значения

Question

Я использую ngFor, чтобы показать разные button. Мне нужно использовать директиву для разных кнопок, но не для всех.

Итак, я делаю этот код:

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

Но я получаю эту ошибку

Ошибка: ошибки разбора шаблона: Неожиданное закрытие тега «кнопка». Это может произойти, если тег уже закрыт другим тегом.

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, директива будет работать иначеничего не случится

демо ??

Answer 2

Ваш синтаксис неверен. Чтобы архивировать то, что вы хотите, сделайте что-то вроде этого:

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

Answer 3

Попробуйте использовать ниже.

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