Angular：如何为*ngFor循环生成的首个元素绑定sticky指令

核心是利用*ngFor内置的first上下文变量判断是否为首个渲染元素，分两种常用场景给出对应写法：

场景1：sticky为Angular自定义属性指令 #

如果你的sticky是自定义Angular属性指令，支持布尔输入控制启用状态，直接用如下写法：

<ng-container *ngFor="let column of columns; let isFirst = first" [sticky]="isFirst"></ng-container>

你只需要在sticky指令的定义里接收输入值，判断为true时执行对应粘性逻辑即可。

场景2：sticky为需要出现在DOM上的原生/第三方属性 #

如果你需要DOM上只有第一个ng-container存在sticky无值属性，其余元素完全不带该属性，用属性绑定写法：

<ng-container *ngFor="let column of columns; let isFirst = first" [attr.sticky]="isFirst ? '' : null"></ng-container>

原理是Angular在[attr.xxx]绑定值为null时，会自动从DOM上移除该属性；绑定值为空字符串时，会保留无值的属性，完全匹配你需要的输出效果。

补充说明：*ngFor内置了多个上下文变量可以直接使用，除了first（首个元素为true），还有last（末个元素为true）、index（当前元素下标，从0开始）、even/odd（下标为偶/奇数时为true），可以按需取用。

内容的提问来源于stack exchange，提问作者user12525404