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

【问题标题】：Ionic v3 - How to change button's "color"-attribute when clickedIonic v3 - 单击时如何更改按钮的“颜色”属性
【发布时间】：2018-06-23 01:45:45
【问题描述】：

离子 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
    });
  }
}

【问题讨论】：

究竟是什么不起作用？请分享您组件的重要部分
我只是不知道如何添加这个“更改颜色”功能。

标签： angular ionic-framework ionic3

【解决方案1】：

将点击操作更改为readNotification(post)，现在可以在readNotification-函数中更改和编辑帖子项目。

感谢您的帮助！

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';
  }
}

【讨论】：

我认为你可以用(click)="post.color = 'light'" 摆脱readNotification。

【解决方案2】：

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

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

HTML

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

然后在你的函数中你所要做的就是修改属性

页面类

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

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

【讨论】：

还有其他方法吗？默认颜色由 {{post.color}} 指定，并在列表初始化时读取。该列表是动态的，在加载时由 JSON 数据生成。
然后当你的数据加载完毕后，查看'read'属性并更新按钮颜色。如果您需要更多帮助，请发布您的 ajax 代码。
"Notifications.ts" export class NotificationsPage { posts: any; constructor(public navCtrl: NavController, public http: Http, private localNotifications: LocalNotifications) { this.http.get('https://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 }); } } 这工作正常，但我不想在单击时重新加载 JSON 数据 - 只想更改 btn 的颜色。
如果您希望在点击时更改颜色，则必须在 readNotification 方法中进行更改。
感谢您的耐心等待！现在我想出了如何做到这一点，它是如此简单！稍等一下，我会发布解决方案...

【解决方案3】：

您只需要检查您的函数，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"
  }
}

【讨论】：