CODEWITHSUNDEEP
arraysangularngfor
Ryn9011
Ryn9011

Reputation: 179

Angular 2+ Iterate over array of arrays

The first screenshot is a console log of the array(messageSplit) I want to display. The second screenshot is how I want the data to look when it's displayed - basically each item of the sub arrays in a td table element.

I have tried the below code, but this gives the dreaded 'Expression has changed after it was checked' error.

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

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

Please can someone explain the right way to go about doing this?

The below code will output as shown in screenshot 3 and is not the desired output as all of the sub arrays are inside a single td element

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

Below is the full code for the particular 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>

messageSplit

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 2410

Answers (3)

Hend Khalifa
Hend Khalifa

Reputation: 657

I think your problem can be solved if you correctly use <tr>. I have tried your code with data similar to yours, and to make it works as you expect (your second screenshot), I have written the code like this:

  <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>

This is the code that I have tested: plunker

Upvotes: 3

Hadee
Hadee

Reputation: 1402

Try this:

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

Upvotes: 0

zolastro
zolastro

Reputation: 937

You could try to iterate it using two *ngFor loops:

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

The first loop will take each array inside of your multidimensional array, and the second one will take each individual element of that inner array.

Upvotes: 0

Related Questions