在 *ngFor 指令的 Node-RED 仪表板问题中答案

【问题标题】：In Node-RED Dashboard problems with *ngFor directive在 *ngFor 指令的 Node-RED 仪表板问题中
【发布时间】：2021-05-21 07:10:34
【问题描述】：

目标是遍历长度未知的字符串数组，并在 Node-RED 仪表板中显示其数据。我面临的问题是仪表板显示数组的长度，以及它在特定索引处的内容，但*ngFor 指令没有按预期工作。

函数中的代码是：

msg.payload = [ "here","second","curazao" ];
console.log(msg)
return msg;

console.log中的数组没问题：

模板块有这样的代码：

<p>lenght is working</p>
<div>{{msg.payload.length}}</div>

<p>msg.payload[0] is working</p>
<ul>
  <li>{{msg.payload[0]}}</li>
  <li>{{msg.payload[1]}}</li>
  <li>{{msg.payload[2]}}</li>
</ul>

<p>*ngFor is not working</p>
<ul>
  <li *ngFor="let element of msg.payload">{{element}}</li>
</ul>

问题是我不能让 *ngFor 工作，这里是如何渲染的：

很可能问题出在我使用*ngFor 指令的方式上。

【问题讨论】：

"函数中的代码是：..." 这个逻辑在哪里调用？这会在ngOnInit 期间或其他地方发生吗？
嗨@PMO1948，这是一个Node-red项目，所以不是一个普通的角度项目，这意味着我没有像普通项目那样的文件夹和文件。如果您看到第一张图片，您将看到一个名为“function”的橙色块（当我单击“timestamp”块时会触发它），这是我的代码。如果这解释了您的要求，请告诉我。
知道了。我不熟悉 NODE-RED，但希望其他人能够提供帮助！

标签： angular dashboard ngfor node-red

【解决方案1】：

这是一个老问题，但我偶然发现了一个类似的问题并找到了解决方案。

看起来正确的方法是使用ng-repeat 指令，例如：

<p>Try with ng-repeat</p>
<ul ng-repeat="element in msg.payload">
  <li>{{element}}</li>
</ul>
</div>

我已经在 Node-Red v2.1.4 上对此进行了测试，它按预期工作。

来源：http://noderedguide.com/tutorial-node-red-dashboards-creating-your-own-ui-widget/

【讨论】：