Question

Ionic 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>

如果点击时点击“主要”，我想更改点击项目从“主要”点击到“点亮”的颜色。

现在点击功能调用“readNotification”函数并打开一个新视图以显示完整信息。

默认颜色在ajax数据中指定。如果消息未被加入，它将以“主要”颜色显示，如果已经被阅读，它将以“浅色”显示。

更新

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

您需要的只是检查您的功能，<div class="colors"> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> </div>是否有post.color值，如果是，则将值更改为"primary"：

"light"

Answer 3

将点击操作更改为 readNotification（帖子），现在可以在 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';
  }
}

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

更新

3 个答案:

HTML

Page class