Angular - How to trigger a *ngFor directive again after pushing some datas in an array?

Question

I am adding an object in my array after a request. Everything goes well but I want the new datas to be displayed at the same time the response is received. When I receive the response, I push the new object in my array used to display messages in my view.

I tried to use ChangeDetectorRef (detectChanges() method) and NgZone (run() method) without success. Basically I want my view to go again on the ngFor to display the last message when sending it.

I searched on internet but couldn't find any answer for Angular except for one thread that didn't work.

Here's the part of my code where I want to trigger the rendering of the messages:

this.chatRequestService.send(this.navParams.get('id_chat'), nmMessage, this.token.value).subscribe(
            (result) => {
              this.messages.push(result);
            },
            (error) => {
              console.log(error);
            }
          );

Here's my ngFor directive in the template:

<ng-container *ngFor="let message of messages[0]">
        <ion-row>
            <ion-col col-1 class="round-right"><ion-avatar item-start><img src="assets/imgs/BK.png" alt="Burger King" title="Burger King"></ion-avatar></ion-col> <!-- remplacer par {{message[0]?.sender.profileImageUrl}} -->
            <ion-col col-9>
                <div *ngIf="currentUser == message?.sender.id else elseBlock1" class="talk-bubble round-left me">
                    <div class="talktext">
                        <h5>{{message?.sender.username}}</h5>
                        <p>{{message?.content}}</p>
                    </div>
                </div>
                <ng-template #elseBlock1>
                    <div class="talk-bubble round-left">
                        <div class="talktext">
                            <h5>{{message?.sender.username}}</h5>
                            <p>{{message?.content}}</p>
                        </div>
                    </div>
                </ng-template>
            </ion-col>
        </ion-row>
    </ng-container>

Thank in advance to anyone who will take the time to read/answer.

You are probably looking for `trackBy` https://stackoverflow.com/questions/42108217/how-to-use-trackby-with-ngfor — Amit Chigadani, Jul 31 '18 at 17:47
Please show us the template and the code (the relevant parts). — ConnorsFan, Jul 31 '18 at 17:59
You should also show the data structure. It is not clear to me why you use `*ngFor="let message of messages[0]"`. Why the `[0]`? Since you add a new item at the end of `messages` in the code, shouldn't you make sure that the last item is displayed, not the first one? Or maybe all `messages`? — ConnorsFan, Jul 31 '18 at 18:20
All messages need to be displayed, but I don't want to do another request. — Pierrick Martellière, Jul 31 '18 at 18:31
@ConnorsFan messages is an observable of an array of Messages. — Pierrick Martellière, Jul 31 '18 at 18:45
@FatehMohamed with asyn pipe: ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' — Pierrick Martellière, Jul 31 '18 at 18:46
When you tried the `async` pipe, did you keep `[0]`? If so, try it without the index. — ConnorsFan, Jul 31 '18 at 19:43
@ConnorsFan ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' — Pierrick Martellière, Jul 31 '18 at 20:10

score 0 · Answer 1 · answered Jan 30 '23 at 12:16

0

There are multiple things u can try out...

First thing I should create a observable and ng for the array with an Async.
Second thing that you can do is State Management (NGRX)

answered Jan 30 '23 at 12:16

Privacy

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 09 '23 at 01:37

score -1 · Answer 2 · answered Jul 31 '18 at 17:55

-1

You can try copying same array with new instance using slice(). Here is the sample code

this.customerArray = this.customerArray.slice();

answered Jul 31 '18 at 17:55

Suresh Kumar Ariya

9,516
1
18
27

It will not solve my problem since recreating a new instance will not trigger the ngFor directive again – Pierrick Martellière Jul 31 '18 at 17:57

score -1 · Answer 3 · answered Jul 31 '18 at 18:17

-1

You can use trackBy with *ngFor, to automatically update the view once the array data is changed (add/delete items). For nice description check this post.

In the same way you can implement some custom function to keep track of the items within the list. So you have to choose the unique identifier among your messages[0] array. For ex : sender.username and return this value from the function.

identify(index, message) {
     return message.sender.username; 
}

html

<ng-container *ngFor="let message of messages[0]; trackBy:identify">
       ...................
</ng-container>

answered Jul 31 '18 at 18:17

Amit Chigadani

28,482
13
80
98

1

Thanks, I made the identify function to return message.id since this is the unique identifier of each message, but nothing changed when testing. – Pierrick Martellière Jul 31 '18 at 18:42
With your example charcater by character it's not working either. But if I put a console.log in the identify function, it's triggered at every DOM events. Must be the right thing to use but I'm still missing something. Your help with this would be really convenient. :) – Pierrick Martellière Jul 31 '18 at 20:23
Can you show, what does `messages` print and not `messages[0]`? – Amit Chigadani Aug 01 '18 at 10:04
My for loop is working, when I'm accessing the page the previous messages are displayed well, only when I push the new sent message in my component's Array property, the new message is not added to the message list. – Pierrick Martellière Aug 01 '18 at 16:16
If I let message of messages, an error is throwed. I'm perfectly sure of my data structure. – Pierrick Martellière Aug 01 '18 at 16:27
If I get all the messages of the current chat after a new message is sent and put them in my messages: Array property, it works. But I want to avoid doing this extra request because my "sent" api method is returning the new sent Message, I just want to display it at the end of the messages list in my template. – Pierrick Martellière Aug 01 '18 at 16:44

Angular - How to trigger a *ngFor directive again after pushing some datas in an array?

3 Answers3