Angular中如何根据索引i动态设置cdkDropListConnectedTo属性？

直接在属性绑定中使用三元表达式即可实现需求，无需用*ngIf——*ngIf是用来控制元素显隐的，并不适合动态修改单个属性值。

修改你的代码中[cdkDropListConnectedTo]的绑定部分：

<div *ngFor="let task of tasks; let i = index">
    <div>
        <div
            cdkDropList
            id="task-container-{{i}}"
            #ref{{i}}="cdkDropList"
            [cdkDropListData]="task.getDropListData()"
            [cdkDropListConnectedTo]="i >= 2 ? [one, two] : [three, four]"
            (cdkDropListDropped)="drop($event)">
            <div>
                <p>{{task.getHeadline()}}</p>
            </div>
        </div>
    </div>
</div>

需要注意：

• 确保one、two、three、four是组件模板中已定义的合法引用（比如对应其他cdkDropList的模板变量，如#one="cdkDropList"），或者是符合要求的连接目标标识符。
• 三元表达式是Angular属性绑定中动态切换值的常用方式，相比*ngIf重复渲染元素，这种方式更高效简洁。

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