在具有特定 ID 的行中附加列表元素答案

【问题标题】：Append list element in row with specific id在具有特定 ID 的行中附加列表元素
【发布时间】：2021-05-19 13:07:36
【问题描述】：

我有一个具有特定 ID 的行列表：

<li *ngFor="let app of Apps; let i = index> 
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>

以及按钮形式的消息列表：

<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}"  >

    <button type="button" id = "btn{{i}}">Message</button>
    <div id="message{{i}}" class="modal">

      
      <div class="modal-content">
        <span id="close{{i}}" class='close'>&times;</span>
        <p>{{msg}}</p>
      </div>

    </div>
  <br> <br>
</li>

我有另一个数组，其中包含这些消息来自的应用程序的名称。我想在 ID 与应用程序名称匹配的行中附加消息（按钮），如下所示：

我是 html/css/javascript/angular 的初学者，所以任何类型的指针和指导都会有所帮助！

【问题讨论】：

你最好合并这两个数组，这样你只需要计算一次。类似于 lodash 合并 - stackoverflow.com/questions/35091975/…)。那时，当您在应用程序上循环时，您已经拥有与之关联的消息
@dmoo 你指的是哪两个数组？应用程序和消息数组？
我愿意，类似_.merge(_.keyBy(apps, 'appName'), _.keyBy(messages, 'appName')); 应该给你一个混合对象数组[{ ... the app properties, ... the messages properties }]。然后在您的 *ngFor="let app of Apps; 中 - 因为它们现在已合并，您将拥有 - app.messageProperty

标签： javascript html angular

【解决方案1】：

您不想在模板中执行此操作。在你的 JS 中：

创建一个包含应用程序和消息数组的对象类型。
遍历您的 Apps 对象并将每个元素推送到您在第一步中创建的对象的新数组中。
遍历您的消息对象并将消息推送到新对象中的消息数组（如果它与应用程序匹配）。
现在您可以在模板中对新对象执行 *ngFor，然后在 newObject.messages 上添加嵌套 *ngFor

【讨论】：

这是否意味着每个应用程序都会有一个新对象？
您基本上是将两个对象合并为一个新的对象，该对象更易于在模板中进行迭代。你最终会得到一个新的对象数组，每个应用程序有一个对象，每个应用程序有一个消息数组。