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]的{{1}}属性。在控制器button中创建一个函数，从模板中传递项目。

isButtonDisabled(button)

在函数内部，检查项目是否已被推入第二个数组。

如果是，<button *ngFor="let item of items" (click)="addItem(item)" [disable]="myitems" [disabled]="isButtonDisabled(item)">{{item}}</button>则按钮被禁用。

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()。

在属性指令中使用DoCheck

2 个答案: