OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

NgFor Doesn't print data from fully populated array of objects

  • Thread starter Thread starter sucha-good-goodboi
  • Start date Start date
S

sucha-good-goodboi

Guest
HERE IS THE IMAGE So here is the problem. I have an array that stores data received from API. Data are messages.

Down below is TS file of component in which I want to print all messages. There is no error, so I don't have anything to work with. Array is full and populated with data. So there is no talking about it.

Here is a TS file of component in which I want to print that data.

Code:
import { HttpErrorResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { Messages } from 'src/app/Data Transfer Objects/Messages';
import { MessagesService } from 'src/app/services/messages.service';

@Component({
  selector: 'app-all-messages',
  templateUrl: './all-messages.component.html',
  styleUrls: ['./all-messages.component.scss']
})
export class AllMessagesComponent {
    private readonly _messageService:MessagesService 
    messageObject:Messages;
    constructor(private messagesService:MessagesService){
        this._messageService = messagesService;
        this.messageObject = new Messages();
    }

    ngOnInit():void{
      this.loadMessages();
    }

    loadMessages(){
      let username = localStorage.getItem("Username")
      this._messageService.getUserMessages(username).subscribe(response=>{
          this.messageObject.Messages = response;
          console.log(this.messageObject.Messages);
      }, (error:HttpErrorResponse)=>{
        console.log(error);
      })
    }
}

Next one is HTML file with ngFor:

Code:
<app-heder></app-heder>
<div class="messages-container">
   <div class="all-users">
      <div class="message-wrapper" *ngFor="let message of messageObject.Messages">
         <div>
            <h1>
               {{message.Message}}
            </h1>
         </div>
      </div>
   </div>
   <div class="message-preview">
        <app-user-to-user-messages></app-user-to-user-messages>
   </div>
</div>

<p><a href="https://i.sstatic.net/7oTCs9Ge.jpg" rel="nofollow noreferrer">HERE IS THE IMAGE</a>
So here is the problem. I have an array that stores data received from API. Data are messages.</p>
<p>Down below is TS file of component in which I want to print all messages.
There is no error, so I don't have anything to work with. Array is full and populated with data. So there is no talking about it.</p>
<p>Here is a TS file of component in which I want to print that data.</p>
<pre><code>import { HttpErrorResponse } from '@angular/common/http';
import { Component } from '@angular/core';
import { Messages } from 'src/app/Data Transfer Objects/Messages';
import { MessagesService } from 'src/app/services/messages.service';

@Component({
selector: 'app-all-messages',
templateUrl: './all-messages.component.html',
styleUrls: ['./all-messages.component.scss']
})
export class AllMessagesComponent {
private readonly _messageService:MessagesService
messageObject:Messages;
constructor(private messagesService:MessagesService){
this._messageService = messagesService;
this.messageObject = new Messages();
}

ngOnInit():void{
this.loadMessages();
}

loadMessages(){
let username = localStorage.getItem("Username")
this._messageService.getUserMessages(username).subscribe(response=>{
this.messageObject.Messages = response;
console.log(this.messageObject.Messages);
}, (error:HttpErrorResponse)=>{
console.log(error);
})
}
}
</code></pre>
<p>Next one is HTML file with ngFor:</p>
<pre><code><app-heder></app-heder>
<div class="messages-container">
<div class="all-users">
<div class="message-wrapper" *ngFor="let message of messageObject.Messages">
<div>
<h1>
{{message.Message}}
</h1>
</div>
</div>
</div>
<div class="message-preview">
<app-user-to-user-messages></app-user-to-user-messages>
</div>
</div>
</code></pre>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top