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

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" ——这个说法是错误的。

*ngFor引擎盖下有许多优化。在这种情况下，前 5 个<tr>实例保持不变，只添加了一个新实例。

当迭代器的内容发生NgForOf变化时，对DOM做出相应的改变：

• 添加项目时，模板的新实例将添加到 DOM。

• 当一个项目被移除时，它的模板实例也会从 DOM 中移除。

• 当项目被重新排序时，它们各自的模板在 DOM 中被重新排序。

Angular 使用对象标识来跟踪迭代器中的插入和删除，并在 DOM 中重现这些更改。

如果您在添加第 6 个产品时查看控制台，您只会看到一个额外的“已被调用”消息。

由于 的值this.bgClass仅在ngOnInit指令挂钩期间读取，因此只有新<tr>实例才会显示为黄色。

Answer 2

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