Question

第一个屏幕截图是我要显示的数组（messageSplit）的控制台日志。第二个屏幕截图是我希望数据在显示时的样子 - 基本上是td表元素中每个子数组的项目。

我已经尝试了下面的代码，但这会让可怕的＆＃39;表达式在检查后发生变化＆＃39;错误。

<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

如果您正确使用<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 2

您可以尝试使用两个* ngFor循环迭代它：

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

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

Answer 3

试试这个：

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

Angular 2+迭代数组数组

3 个答案: