Angular 指令中布尔比较的 2 个问题

Question

我是 Angular 2 的新手，我不知道为什么我的指令不起作用。

这是我的指令：

import {Observable} from 'rxjs/Rx';

declare var jQuery: any;

@Directive({
  selector: '[j-slider]',
})
export class JSliderDirective {
 elRef: ElementRef;

  constructor(elRef: ElementRef) {
    this.elRef = elRef;
  }

  @Input('j-slider') last: boolean;

 ngOnInit() {
   console.log(this.last);
   if (this.last == true)
     console.log('pass');
  }

}

我的HTML:

<div class="shopping-slider">
    <div class="shopping-slide" *ngFor='let product of products; let last = last' j-slider="{{last ? true: false}}">
        <img src="{{product.img}}" alt="{{product.name}}"/>
        <p class="shopping-label">{{product.name}}</p>
    </div>
</div>

所以我希望我的 init 语句在重复完成后变为运行。当我在 if 语句之前记录 'this.last' 时，它给了我 false，然后最后重复了 true，这是正确的。但是，我的 if 语句失败了……为什么？我究竟做错了什么？或者有更好的方法吗？

谢谢！

Answer 1

帮自己一个大忙，使用 Angular 2 [bind] 语法！

现在使用花括号 {{}} 隐式传递 true 和 false 作为字符串，以及 "true" != true。不好。

像这样简单地包装 j-slider 属性：

<div class="shopping-slide" *ngFor='let product of products; let last = last' [j-slider]="last">

还有中提琴！

Angular 指令中布尔比较的 2 个问题

Angular 2 issues with boolean comparison in a directive

angular

directive

ngfor