Angular [style] 并不总是使用 *ngFor div

Question

欢迎，我有 Angular 应用程序，它看起来和工作起来应该像 Messenger 一样将所有消息写入 MySQL。

问题是它看起来像这样：

但应该是这样的：

component.html片段：

<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片段：

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 来自 API:

Answer 1

我以为这只是设置错误的键，to应该是to_id，这是我的演示，你可以按照这个。

stackblitz

Angular [style] 并不总是使用 *ngFor div

Angular [style] not always working with *ngFor divs

css

dom

ng-style

ngfor

angular