如何用Node-RED模板节点将多选下拉列表值发送至MQTT主题

嘿，你之前的代码只渲染了多选下拉框的HTML，但没把选中的值和Node-RED的消息流绑定起来，自然没法把数据传到MQTT节点啦。我给你调整下代码和配置，保证能解决问题：

1. 替换Template节点的HTML代码 #

把原来的代码换成下面这段，我加了AngularJS的数据绑定和消息发送逻辑：

<div ng-bind-html="msg.payload"></div>

<!-- 多选下拉框，用ng-model绑定选中的所有值 -->
<select multiple ng-model="selectedDays" style="height: 150px;">
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
    <option value="7">Sunday</option>
</select>

<!-- 点击这个按钮就会把选中的星期发出去 -->
<button ng-click="sendSelectedDays()">发送选中的星期</button>

<script>
    // 定义发送逻辑的函数
    (function(scope) {
        scope.sendSelectedDays = function() {
            // 把选中的数组作为消息payload发送给下一个节点
            scope.send({ payload: scope.selectedDays });
        };
    })(scope);
</script>

2. 关键部分的作用 #

• ng-model="selectedDays"：这是Node-RED Dashboard基于AngularJS的核心指令，会自动把你选中的所有星期值存到selectedDays数组里——选一个加一个，取消选就删掉，完全不用你手动维护。
• ng-click="sendSelectedDays()"：绑定按钮的点击事件，点击就调用我们写的发送函数。
• scope.send(...)：这是Node-RED提供的内置方法，专门用来把数据作为消息发送到后续节点（也就是你的MQTT节点）。

3. 可选：自动发送选中变化 #

要是你不想点按钮，希望选完就自动发，那把按钮删掉，给下拉框加个ng-change指令就行：

<select multiple ng-model="selectedDays" ng-change="sendSelectedDays()" style="height: 150px;">
    <!-- 选项内容和之前一样 -->
</select>

<script>
    (function(scope) {
        scope.sendSelectedDays = function() {
            // 避免初始状态下selectedDays为空的情况
            if (scope.selectedDays) {
                scope.send({ payload: scope.selectedDays });
            }
        };
    })(scope);
</script>

4. 最后检查MQTT节点 #

确保你的MQTT节点已经配置好了Broker地址、要发布的主题这些信息，等Template节点发送消息后，MQTT节点就会把msg.payload里的选中值数组（比如["1","3"]）发布到指定主题啦。

测试的时候，选几个星期，点按钮（或者自动触发），去调试面板里就能看到消息的payload是选中的数组，同时MQTT也会把数据发出去咯～

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