Question

Using Angular 4, I'm trying to use ngClass by comparing a variable, sender created in a function and an object from an array, item.sender.

Here is the HTML:

<ion-card *ngFor="let item of items" [ngClass]="{'me': item.sender == sender, 'notme': item.sender != sender}">
  <ion-card-header>
    @{{item.sender}}
  </ion-card-header>
  <ion-card-content>
    {{item.message}}
  </ion-card-content>
</ion-card>

The function with the variable sender is:

send(desc: string) {
  console.log("message:", desc);

  var listkey = this.listKey;
  var user = firebase.auth().currentUser;
  var uid = user.uid;
  var email = user.email;
  var sender = email.substring(0, email.lastIndexOf("@"));

  var messagecontent = {
    message: this.messagecontent,
    sender: sender,
  };

  firebase.database().ref('userlists' + '/' + listkey +  '/' + 'chat').push(messagecontent);
  this.messagecontent = '';
}

Can this by done, and if so, what am I missing?

Answer 1

  public  sender:string = '';


   send(desc: string) {
     console.log("message:", desc);
    ... 
      this.sender = email.substring(0, email.lastIndexOf("@"));
    ....

您还可以使用var和let替换所有const。

Answer 2

您可以使用三元方程并申请ngClass

<强> CODE

<ion-card *ngFor="let item of items" [ngClass]="item.sender === sender ? me : notme">
  <ion-card-header>
    @{{item.sender}}
  </ion-card-header>
  <ion-card-content>
    {{item.message}}
  </ion-card-content>
</ion-card>

How can I use a variable from a function with ngClass?

2 个答案: