Angular：如何使用 *ngFor 将指令绑定到元素

Posted 2023-02-22

【中文标题】Angular：如何使用 *ngFor 将指令绑定到元素

【英文标题】：Angular: How to bind directives to elements with *ngFor

【发布时间】：2021-12-17 02:15:21

【问题描述】：

我有一个<ng-container *ngFor='let column of columns'></ng-container>，由于*ngFor，它在页面上显示了多次。我想仅将“粘性”属性（指令）应用于这些 ng-container 元素中的第一个。不给其他人。我怎样才能做到这一点？输出应如下所示：

<ng-container sticky></ng-container>
<ng-container></ng-container>
<ng-container></ng-container>
<ng-container></ng-container>
...

【问题讨论】：

也许this 可能会有所帮助，但我不知道它是否真的是重复的，因为*ngFor 可能会使它变得更加困难

【参考方案1】：

ngFor 指令具有 a first variable，这仅适用于第一次迭代。

ngIf 具有 an else keyword，与 template variable 一起可以有条件地渲染两个模板之一。

<ng-container *ngFor="let column of columns; first as isFirst">
    <ng-container *ngIf="isFirst; else notFirst" sticky></ng-container>
    <ng-template #notFirst></ng-template>
</ng-container>

【讨论】：

请注意@nenad-milosavljevic 对这个问题的回答，关于在<ng-container> 上使用sticky 指令

sticky 可能是structural directive，而提供的代码只是缺少appropriate shorthand；尽管这也需要一个额外的元素，因为不支持同一元素上的多个结构指令。你们都说得对，属性不能按原样直接应用。

【参考方案2】：

您可以为此使用索引：

<ng-container *ngFor="let column of columns; let i = index">
    <div *ngIf="i=0" sticky></div>
    <div *ngIf="i!=0"></div>
</ng-container>

【参考方案3】：

<ng-container> 不会存在于 DOM 中。它仅用于循环遍历项目并动态生成一些内容。所以如果你直接对它应用sticky指令，它不会有任何效果。但是您可以将sticky 指令应用于<ng-container> 生成的元素。我建议您在 <ng-container> 内添加一个 <div> 作为内容的包装器，并对其应用 sticky 指令。此外，您可以使用*ngFor 的first 变量将sticky 指令仅应用于第一个元素。

<ng-container *ngFor='let column of columns; let first as first'>
  <div *ngIf="first" sticky>
    <!--Your actual content-->
  <div>
  <div *ngIf="!first">
    <!--Your actual content-->
  <div>
</ng-container>