如何为 Ionic 3/Angular 4 应用插值或绑定

Question

我的想法是检索安装了 MongoDB 的 Parse Server 的数据。

我在控制台中成功显示了数据，但在 html 模板中我无法插入它们。

这里是search.ts

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 但它不起作用。

怎么可能显示出来？

非常感谢

Answer 1

根据您提供的 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>

Answer 2

您需要在 Ionic 上构建如下所示的模板。

 <ion-content padding> 
    <ion-list>
        <ion-item *ngFor="let user of users">
          <ion-label>{{user.username}}</ion-label>
        </ion-item>
    </ion-list>
 </ion-content>

如何为 Ionic 3/Angular 4 应用插值或绑定

How to apply Interpolation or Binding for Ionic 3/Angular 4

parse-platform

typescript

ionic3

angular