Использование DoCheck в директиве атрибута

Question

Я создал простое приложение, используя ngFor, чтобы создать серию кнопок из массива. Когда нажимается кнопка, это значение переносится во второй массив.

У меня есть директива атрибута disable, которая прослушивает изменения в массиве с использованием DoCheck() и отключает любую кнопку, значение которой уже существует в массиве, чтобы предотвратить ее добавление более одного раза.

Все работает, но есть ли лучший подход? Сайт Angular 2 рекомендует соблюдать осторожность при использовании DoCheck().

Посмотреть

<ul> 
    <li *ngFor="let myitem of myitems">{{ myitem }} 
    <a href="#" (click)="deleteItem(myitem)"> x</a> 
    </li> 
</ul> 
<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems">{{item}}</button> 

Атрибут Директива

@Directive({ 
    selector: '[disable]' 
}) 
export class DisableDirective implements DoCheck { 
    @Input('disable') myitems : string[]; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    ngDoCheck() { 
     if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
     } else { 
     this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
     this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
     } 
    } 
} 

Answer 1

Вы можете привязать к [disabled] свойству button. Создайте функцию в контроллере isButtonDisabled(button), где вы передадите элемент из шаблона.

<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems" [disabled]="isButtonDisabled(item)">{{item}}</button>

Внутри функции, проверьте, если элемент уже толкнул во второй массив.

Если да, то return true, чтобы кнопка была отключена.

Answer 2

вместо использования directive, почему бы не выполнить проверку addItem() в вашем компоненте.

DoCheck() метод должен иметь ограниченное использование, поскольку он собирается запускать каждый раз, когда цикл обнаружения изменения выполняется. поэтому вы должны быть осторожны в использовании.

Предпочтительно использовать OnChanges() вместо DoCheck(), поскольку первый работает только при изменении в input объектов.

вы можете попробовать:

export class MyComponent implents OnChanges{ 

    addItem(item) { 

    if(this.myitems.find(item => item === this.el.nativeElement.innerText)) { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', true); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', true); 
      } 
else { 
      this.renderer.setElementProperty(this.el.nativeElement, 'disabled', false); 
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', false); 
      } 
     } 
    } 

ngOnChanges() { 
this.addItem(item); 
} 

в вашем случае вы можете пропустить с помощью directive.

если действительно хотите использовать directive, тогда сдвиньте всю логику от DoCheck() до OnChanges().