Search code examples
cssangulardomngforng-style

Angular [style] not always working with *ngFor divs

Welcome, I have Angular application which should look and work like messenger writing all messaages to MySQL.

The problem is that it looks like this: WRONG

But should look like this: RIGHT

component.html fragment:

<div *ngFor="let m of messages" [style.background-color]="m.to===conversationPartnerId ? 'lightgrey' : 'blueviolet'"
         [style.margin-left]="m.to!=conversationPartnerId ? '5%' : '15%'"
         [style.margin-right]="m.to===conversationPartnerId ? '5%' : '15%'"
         style="width: 80%; height: auto; float: left; margin-top: 5%">
      <h3 style="color: white">{{m.text}}</h3>
    </div>

component.ts fragment:

export class BrowseComponent implements OnInit {

  userKey = null;
  profileToDecide: Profiles;
  matches: Profiles[];
  currentImage: any;
  background: any;
  decisionResponse: any;
  conversationPartnerId: number;
  conversationPartnerName: string;
  messages: Messages[];


LINES OF OTHER METHODS
...
...
...
getMessages(id: number, name: string): void {
    this.setConversationPartnerIdAndName(id, name);
    let registerObject: object;
    registerObject = {
      "key": this.userKey,
      "target": this.conversationPartnerId,
    };
    this.restService.getMessages(registerObject).subscribe(messages => {
      this.messages = messages;
    })
  }

  setConversationPartnerIdAndName(id: number, name: string): void { // Set key and name used in html 
    this.conversationPartnerId = id;                                // ngStyle formatting
    this.conversationPartnerName = name;
  }

JSON from API: JSON server response

Solution

  • I thought this just set the wrong key, to should be to_id, this is my demo, you can follow this.

    stackblitz