为什么数据绑定不适用于我的自定义属性指令

Question

下面是我的代码，我省略了组件代码的缩写：

模板.html

 ...

 <tr *ngFor="let item of getProducts(); let i = index"

     [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'">

     <td>{{item.name}}</td>             

 </tr>

以下是自定义属性指令代码：

@Directive({

    selector: "[pa-attr]",

})

export class PaAttrDirective {

    constructor(private element: ElementRef) {

        console.log('been called')

    }

    @Input("pa-attr")

    bgClass: string;

    ngOnInit() {

        this.element.nativeElement.classList.add(this.bgClass || "bg-success",

            "text-white");

    }

}

目前我有 5 个项目：

然后我添加一个新项目，然后我有：

我在这里很困惑，为什么只有第六项的颜色更改为黄色（bg-warning）？是否应该将所有项目的颜色都更改为黄色？因为当我添加一个新项目时，数据源发生了getProducts()变化，所以getProducts().length返回了6个项目，既然数据源发生了变化，那么整体<tr>应该重新评估，所以现在每个项目的第1到第6个应该是黄色的，不是吗？那么为什么只有第六项是黄色的？

Answer 1

"since the data source changes, the whole <tr> should be reevaluated"&nbsp;——这个说法是错误的。*ngFor引擎盖下有许多优化。在这种情况下，前 5 个<tr>实例保持不变，只添加了一个新实例。当迭代器的内容发生NgForOf变化时，对DOM做出相应的改变：添加项目时，模板的新实例将添加到 DOM。当一个项目被移除时，它的模板实例也会从 DOM 中移除。当项目被重新排序时，它们各自的模板在 DOM 中被重新排序。Angular 使用对象标识来跟踪迭代器中的插入和删除，并在 DOM 中重现这些更改。如果您在添加第 6 个产品时查看控制台，您只会看到一个额外的“已被调用”消息。由于 的值this.bgClass仅在ngOnInit指令挂钩期间读取，因此只有新<tr>实例才会显示为黄色。

Answer 2

我没有做很多 Angular，但这看起来就像我从所提供的代码中所期望的那样。每次运行循环 (&nbsp;let item of getProducts()) 时，由于属性中的逻辑，前 5 个<tr>（表行）将bg-success应用该类[pa-attr]，除此之外的所有内容都已bg-warning应用。