Angular 如何为离子3/4应用插值或绑定
我的概念是检索安装MongoDB的解析服务器的数据 我成功地在控制台中显示了数据,但在html模板中我无法插入它们 这是search.tsAngular 如何为离子3/4应用插值或绑定,angular,typescript,parse-platform,ionic3,Angular,Typescript,Parse Platform,Ionic3,我的概念是检索安装MongoDB的解析服务器的数据 我成功地在控制台中显示了数据,但在html模板中我无法插入它们 这是search.ts import { localData } from './../../services/local'; import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Parse } from 'parse'; import
import { localData } from './../../services/local';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Parse } from 'parse';
import 'rxjs/add/operator/map';
import {User} from '../../models/User';
@Component({
selector: 'page-search',
templateUrl: 'search.html'
})
export class SearchPage {
currentUser = Parse.User.current();
query1 = new Parse.Query('Friends');
friendQuery = new Parse.Query('Friends');
query = new Parse.Query(Parse.User);
tmp: any;
users: any= [];
user: any= [];
loadUsers (){
this.tmp = this.localdata.getUsers();
}
initializeItems() {
this.users;
}
constructor(public navCtrl: NavController, private localdata: localData) {
this.query.find().then(data => {
this.tmp = data;
console.log(this.tmp);
this.localdata.setUsers(this.tmp);
this.users = this.localdata.getUsers();
console.log (this.users);
console.log(this.users.username)
})
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.users = this.users.filter((user) => {
return (user.username.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
这是我保存用户数组的local.ts
import { Component } from '@angular/core';
export class localData {
setUsers (users){
window.localStorage.users_data = JSON.stringify(users);
}
getUsers(){
return JSON.parse(window.localStorage.users_data || '[]');
}
}
最后是我的html模板search.html
<ion-header>
<ion-navbar>
<ion-searchbar
(ionInput)="getItems($event)"
(ionCancel)="onCancel($event)"
[animated]= true>
</ion-searchbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item class="item-avatar item-avatar-left item-button-right common-list" *ngFor="let user of users"></ion-item>
<div></div>
</ion-content>
在html模板中,在div中,我想使用user.username,但它不起作用
如何显示它
非常感谢根据您提供的JSON屏幕截图,它没有用户名属性,请尝试此项
<ion-content padding>
<ion-item class="item-avatar item-avatar-left item-button-right common-list" *ngFor="let user of users">
<h1> {{user.className}}</h1>
</ion-item>
<div></div>
{{user.className}
您需要构建模板,如下所示
<ion-content padding>
<ion-list>
<ion-item *ngFor="let user of users">
<ion-label>{{user.username}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
{{user.username}
你的控制台显示什么?在这里发布格式ParseUser{{u objCount:2,类名:“{u User”,id:“DFDpRit4WD”}1:ParseUser类名:“{u User”id:“2y5q7rIHPU”\u objCount:3属性:(…)createdAt:(…)updatedAt:(…)proto:ParseObject 2:ParseUser{u objCount:4,类名:“{u User”,id:“py0JzZBxSN”}3:粘贴json而不是图像第一个控制台只显示表“Users”的一列,objectid,第二个控制台显示“Users”表的所有列噢,天哪,我在ion项之外使用了div,非常感谢,我努力了好几个小时噢,天哪,我在ion项之外使用了div,非常感谢,我努力了好几个小时,请你再帮我一点,在我输入搜索后,它就可以了过滤项目,但在我取消搜索后,列表不会返回到原始状态。我无法在上面的code
上看到onCancel($event)
?对,我刚刚在onCancel(ev:any){this.initializeItems();}上添加了这一个,它工作得很好;)谢谢你,洛蒂,这是真的吗?