How to display content in this case?-CodePudding

Soooo, Im trying to do a messaging feature, and encountered a strange problem. I can't display content from messages on browser, and i dont understand what I did wrong. Can Someone explain to me why it doesn't work? And help to solve this problem?

Service:

GetMessageThread(email: string){
  return this.http.get<Message[]>(this.baseUrl  'Messages/thread/'   email);
}

Ts:

export class MemberMessagesComponent implements OnInit {
@Input() email!: string | any;
messages!: Message[];

constructor(private messageService: MessageService) {}

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

loadMessages() {
  this.messageService.GetMessageThread(this.email).subscribe(email =>{
    this.email = email;
    console.log(this.email);
  })
}

HTML

<ul *ngFor="let message of messages">
    <li>{{ message?.content }}</li>
</ul>

The response works fine, it gets these messages, but nothing is displayed on the page

The response from console.log(this.email)

I dont understand it... why doesnt it display 'content'?

CodePudding user response：

Just change this in your code:

loadMessages() {
  this.messageService.GetMessageThread(this.email).subscribe(response=>{
    this.messages = response;
    console.log(this.messages);
  })
}

By the way, you asked for the way: As you sure as notice by now, you were asigning the response of your http call to the 'email' variable, and in your HTML code, you were trying to show the content of 'messages', not 'email'.

CodePudding user response：

Change your Message into an Observable:

messages$!: Observable<Message[]>;

Then you can assign your Observable like so:

loadMessages() {
  this.messages$ = this.messageService.GetMessageThread(this.email);
}

On your template side:

<ul *ngFor="let message of messages$ | async">
    <li>{{ message?.content }}</li>
</ul>