Angular 2+ 遍历数组的数组

Question

第一个屏幕截图是我要显示的数组(messageSplit) 的控制台日志。第二张截图是我希望数据在显示时的样子——基本上是 td table 元素中子数组的每一项。

我试过下面的代码，但这会导致可怕的 'Expression has changed after it was checked' 错误。

<div *ngFor="let item of messageSplit[increment()];
     <td>{{item}}</td>
</div>

increment() {
    if (this.counter < this.messages.length) {
    return this.counter++;
}

有人可以解释一下执行此操作的正确方法吗？

下面的代码将如屏幕截图 3 所示输出，而不是所需的输出，因为所有子数组都在单个 td 元素内

<div *ngFor="let message of messageSplit;">
    <td *ngFor="let item of message">{{item}}</td>
</div>

下面是特定 tr 的完整代码

<tr *ngFor="let message of messages" [routerLink]="['/members', 
     messageContainer == 'Outbox' ? message.recipientId : 
     message.senderId]" [queryParams]="{tab:'3'}">
     <div *ngFor="let message of messageSplit"> 
         <td *ngFor="let item of message"> {{item}}></td>
     </div>    

     <td>
         <div *ngIf="messageContainer != 'Outbox'">
            <!-- <img [src]="message.senderPhotoUrl" class="img-circle"> -->
            <strong *ngIf="message.senderId == 1">Boost Promotions</strong>
            <strong *ngIf="message.senderId == 2">Lion</strong>
         </div>
         <div *ngIf="messageContainer == 'Outbox'">
            <strong *ngIf="message.recipientId == 2">Boost 
                Promotions</strong>
            <strong *ngIf="message.recipientId == 1">Lion</strong>
         </div>
         </td>
         <td>
           <small class="text-muted">
            <span class="fa fa-clock-o">{{message.messageSent | timeAgo}} 
            </span>
            <span *ngIf="!message.isRead" class="text-muted text-danger"> 
            (Unread)</span>
            <span *ngIf="message.isRead" class="text-muted text-success"> 
            (Seen)</span>
           </small>
        </td>
     <td>
</tr>

Answer 1

您可以尝试使用两个 *ngFor 循环对其进行迭代：

<div *ngFor="let message of messageSplit;">
    <td *ngFor="let item of message">{{item}}</td>
</div>

第一个循环将获取多维数组中的每个数组，第二个循环将获取该内部数组中的每个单独元素。

Answer 2

我想如果你正确使用<tr>，你的问题是可以解决的。我已经用与您的数据相似的数据尝试了您的代码，并使其按您预期的方式工作（您的第二个屏幕截图），我编写了如下代码：

  <tr *ngFor="let message of messages; let i = index">
    <td>
      <div *ngFor="let item of messageSplit[i]">{{item}}</div>
    </td>

    <td>
     // your next td (From)
    </td>

    <td>
     // your next td (Received)
    </td>
</tr>

这是我测试过的代码：plunker

Answer 3

试试这个：

                <td>{{ message.from }}</td>
                <td>{{ message.Received}}</td>  </tr>

Angular 2+ 遍历数组的数组

Angular 2+ Iterate over array of arrays

arrays

ngfor

angular