angular - 在 ionic 中动态更改背景项目(来自 json 服务器的数据)
问题描述
我想开发一个从 json 服务器获取数据以加载列表的应用程序,当我单击一个项目时,她的背景颜色会更改,并且 ischlicked 属性更改为 true。这是我的 home.html 代码:
<ion-header>
<ion-navbar>
<ion-title>home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list class="notifications-list">
<ion-item *ngFor="let notification of notifications" (click)="onItemClick(notification)" [ngStyle]="{ background: notification.isClicked ? '#F6F6F6': '#E4E9F1'}">
<img width="20" src="{{BaseURL + notification.image}}" item-start />
<b>{{notification.name1}}</b><br>{{notification.name2}}<br> {{notification.name3}}
<label item-end>{{notification.time}}</label>
</ion-item>
</ion-list>
</ion-content>
这是我的 home.ts 代码:
import { Component, OnInit, Inject } from '@angular/core';
import { ViewController, IonicPage, NavController } from 'ionic-angular';
import { Notification } from '../../shared/notification';
import { NotificationProvider } from '../../providers/notification/notification';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage implements OnInit {
notifications: Notification[];
notificationErrMess: string;
constructor(public viewCtrl: ViewController,
private notificationservice: NotificationProvider,
@Inject('BaseURL') private BaseURL) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad NotificationPage');
}
ngOnInit() {
this.notificationservice.getNotifications()
.subscribe(notifications => this.notifications = notifications,
errmess => this.notificationErrMess = <any>errmess);
}
onItemClick(notification) {
if (notification.isClicked == false) {
notification.isClicked = true;
}
//else {
// div.isClicked = true;
// }
}
}
这是我的提供者 notification.ts 代码:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Notification } from '../../shared/notification';
import { Observable } from 'rxjs/Observable';
import { Http, Response } from '@angular/http';
import { baseURL } from '../../shared/baseurl';
import { ProcessHttpmsgProvider } from '../process-httpmsg/process-httpmsg';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/catch';
@Injectable()
export class NotificationProvider {
constructor(public http: Http,
private processHTTPMsgService: ProcessHttpmsgProvider) {
console.log('Hello NotificationProvider Provider');
}
getNotifications(): Observable<Notification[]> {
return this.http.get(baseURL + 'notifications')
.map(res => { return this.processHTTPMsgService.extractData(res); })
.catch(error => { return this.processHTTPMsgService.handleError(error); });
}
getNotification(id: number): Observable<Notification> {
return this.http.get(baseURL + 'notifications/' + id)
.map(res => { return this.processHTTPMsgService.extractData(res); })
.catch(error => { return this.processHTTPMsgService.handleError(error); });
}
getClickedNotification(): Observable<Notification> {
return this.http.get(baseURL + 'notifications?isClicked=true')
.map(res => { return this.processHTTPMsgService.extractData(res)[0]; })
.catch(error => { return this.processHTTPMsgService.handleError(error); });
}
getUnClickedNotification(): Observable<Notification> {
return this.http.get(baseURL + 'notifications?isClicked=false')
.map(res => { return this.processHTTPMsgService.extractData(res)[0]; })
.catch(error => { return this.processHTTPMsgService.handleError(error); });
}
}
这是我的提供程序流程-httpmsg.ts:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Response } from '@angular/http';
import 'rxjs/add/observable/throw';
@Injectable()
export class ProcessHttpmsgProvider {
constructor(public http: Http) {
console.log('Hello ProcessHttpmsgProvider Provider');
}
public extractData(res: Response) {
let body = res.json();
return body || {};
}
public handleError(error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
这是我的通知界面:
export interface Notification {
id: number;
image: string;
name1 : string;
name2 : string;
name3 : string;
time : string;
isClicked: boolean;
page: string;
}
这是我的 baseurl 文件:
export const baseURL = 'http://localhost:3000/';
这是我的 db.json 文件:
{
"notifications": [
{
"id": 0,
"image": "images/buffet.png",
"name1": "name1",
"name2": "name2",
"name3": "name3",
"time": "time",
"isClicked": "true",
"page": "oasis"
},
{
"id": 1,
"image": "images/buffet.png",
"name1": "name1",
"name2": "name2",
"name3": "name3",
"time": "time",
"isClicked": "false",
"page": "oasis"
}
]
}
解决方案
推荐阅读
- javascript - GSAP Draggable:如何动态阻止移动
- scala - spark 2.2.0,如果有追加,调用 cache() 会得到不同的结果
- php - 带有两个参数的 PHP 异常
- c# - 从 SQL 加载数据时显示带有动画的等待对话框
- python - PyQt GUI:如何存储数据(类对象)?
- swift4 - AR 多用户弹丸 (Swift4)
- react-native - 反应原生 0.55.4 导航参数无法进入另一个屏幕
- python - 如何从 python 访问自定义 swift 或 Objective C 框架
- javascript - Angular Highcharts - 选择时动态调整系列高度
- php - 尽管对代码进行了多次更新,但 Codeigniter/PHP 标题不会更新