Ionic v3 - 如何在单击时更改按钮的“颜色” - 属性

Question

离子v3

我正在我的演示应用中查看通知列表。

列表代码（notifications.html）

  <ion-list>
    <button ion-item *ngFor="let post of posts" color="{{post.color}}" id="btn_{{post.item}}" (click)="readNotification(post.item)" >
      <ion-icon name="{{post.icon}}" item-start></ion-icon>
      <h2>{{post.title}}</h2>
      <p>{{post.content}}</p>
    </button>
  </ion-list>

如果单击“主要”，则单击“主要”到“浅”时，我想更改所单击项目的颜色。

现在，click函数调用“readNotification”函数并打开一个新视图以显示完整的消息。

默认颜色在ajax数据中指定。如果消息未被呈现，则它将以“主”颜色显示，如果已经读取，则将以“浅”颜色显示。

UPDATE

Notifications.ts

export class NotificationsPage {
  posts: any;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    private localNotifications:
    LocalNotifications
  ) {
    this.http.get('xxx?oper=getNotificationsJSON')
    .map(res => res.json())
    .subscribe(data => {
      this.posts = data.results;
    },
    err => {
      console.log("oops!");
    });
  }

  readNotification(item: string) {
    this.navCtrl.push(ReadNotificationPage, {
      id: item
    });
  }
}

Answer 1

你似乎已经拥有了所有的东西。

您有一个在模板中用于指定颜色的属性。

HTML

<button ion-button (click)="readNotification()" color="{{post.color}}">change color</button>

然后在您的函数中，您只需要修改属性即可

Page class

public post: any = {color: 'primary'};

public readNotification() {
    this.post.color = 'light';
}

Answer 2

所有你需要的只是检查你的函数，post.color有"primary"值，如果是，然后将值更改为"light"：

readNotification(): void {
  // do stuff with "post.item" and everything you want

  if (post.color === "primary") {
    post.color = "light"; // will change the color to "light" only if the current color is "primary"
  }
}

Answer 3

将单击操作更改为readNotification（post），现在可以在readNotification-function中更改和编辑帖子项。

谢谢你的帮助！

Notifications.html

  <ion-list>
    <button ion-item *ngFor="let post of posts" color="{{post.color}}" (click)="readNotification(post)" >
      <ion-icon name="{{post.icon}}" item-start></ion-icon>
      <h2>{{post.title}}</h2>
      <p>{{post.content}}</p>
    </button>
  </ion-list>

Notifications.ts

export class NotificationsPage {
  posts: any;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    private localNotifications:
    LocalNotifications
  ) {
    this.http.get('xxx?oper=getNotificationsJSON')
    .map(res => res.json())
    .subscribe(data => {
      this.posts = data.results;
    },
    err => {
      console.log("oops!");
    });
  }

  readNotification(post) {
      post.color = 'light';
  }
}