如何在嵌套的双引号和单引号内实现复杂绑定？

嘿，我瞅见你在写Angular自定义下拉组件时碰到绑定的坑啦！你现在的写法里把插值表达式塞进了click事件的字符串里，这可不是正确的打开方式哦～

你看，你原来的代码里这么写：

<dropdown-panel #dropdown>
  @for (item of data; track item.value) {
    <div (click)="select('{{item.value}}','{{item.description}}')" class="dropdown-item">{{item.description}}</div>
  }
</dropdown-panel>

这里的问题在于，Angular的事件绑定（就是(click)这种）里，括号内直接是组件上下文的表达式，不需要再用{{}}插值语法把变量转成字符串。你现在这么写，反而会把'{{item.value}}'当成字面量字符串传给select方法，而不是动态获取item的真实值。

正确的写法其实很简单，直接把循环里的item变量作为参数传进去就行，不用加单引号和插值：

<dropdown-panel #dropdown>
  @for (item of data; track item.value) {
    <div (click)="select(item.value, item.description)" class="dropdown-item">{{item.description}}</div>
  }
</dropdown-panel>

为啥这样就行呢？因为在Angular的事件绑定上下文里，你可以直接引用循环迭代出来的item对象，Angular会自动帮你处理变量的传递，不管item.value是字符串还是其他类型，都能正确传给select方法。要是你的select方法明确需要字符串参数，只要item本身的属性是字符串，直接传就ok，完全不用手动拼接。

内容来源于stack exchange