如何从搜索栏输入将数据 html 文件传递到 Ionic (最新) 中的 .ts 文件

Question

下面的代码带有视图和.ts .我想在搜索栏中输入，输入必须从html传递到.ts，并且我请求的Json数据应该根据传递的数据正确过滤。API URL 是 https://api.github.com/search/users?q=dines 的，其中 if q 的值被更改，应该在视图中更改名称。

首页.html

这是我的视图模板。

<ion-header>
<ion-navbar color="primary">
<ion-title>
Git Profiles
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-searchbar floating [(ngModel)] = "myInput" (ionInput)="getNames($event) "> Search</ion-searchbar>
</ion-item>
<ion-card *ngFor = "let post of posts?.items">
<ion-item>
<ion-avatar item-start>
<img [src] = "post?.avatar_url" alt="" />
</ion-avatar>
</ion-item>
<ion-card-content>
<p>Name : {{post.login}}</p>
<p>Score : {{post.score}}</p>
</ion-card-content>
</ion-card>
</ion-content>

首页

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostProvider } from '../../providers/post/post';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage implements OnInit {
posts:Post[];
constructor(public navCtrl: NavController , private PostProvider: PostProvider ) {
}

ngOnInit()
{
this.PostProvider.getPosts().subscribe((posts)=> {
this.posts = posts;
});
}
}
interface Post{
login:string,
avatar_url:any,
score:number
}

Answer 1

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostProvider } from '../../providers/post/post';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage implements OnInit {
posts:Post[];
constructor(public navCtrl: NavController , private PostProvider: PostProvider ) {
}
ngOnInit()
{
this.PostProvider.getPosts().subscribe((posts)=> {
this.posts = posts;
});
}
}
search(data){
condsle.log(data);
}
interface Post{
login:string,
avatar_url:any,
score:number
}

<ion-header>
<ion-navbar color="primary">
<ion-title>
Git Profiles
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-searchbar floating [(ngModel)] ="myInput"  (keyup)="search(myinput)"(ionInput)="getNames($event) "> Search</ion-searchbar>
</ion-item>
<ion-card *ngFor = "let post of posts?.items">
<ion-item>
<ion-avatar item-start>
<img [src] = "post?.avatar_url" alt="" />
</ion-avatar>
</ion-item>
<ion-card-content>
<p>Name : {{post.login}}</p>
<p>Score : {{post.score}}</p>
</ion-card-content>
</ion-card>
</ion-content>

Answer 2

你好，你可以试试这样的东西

首页.html

<ion-header>
<ion-navbar color="primary">
<ion-title>
Git Profiles
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-searchbar floating [(ngModel)] = "myInput" (ionInput)="getNames($event) "> Search</ion-searchbar>
</ion-item>
<ion-card *ngFor = "let post of posts?.items">
<ion-item>
<ion-avatar item-start>
<img [src] = "post?.avatar_url" alt="" />
</ion-avatar>
</ion-item>
<ion-card-content>
<p>Name : {{post.login}}</p>
<p>Score : {{post.score}}</p>
</ion-card-content>
</ion-card>
</ion-content>

首页

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostProvider } from '../../providers/post/post';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage implements OnInit {
posts:Post[];

constructor(public navCtrl: NavController , private PostProvider: PostProvider ) {
}
ngOnInit()
{
this.PostProvider.getPosts().subscribe((posts)=> {
this.posts = posts;
});
}
}


interface Post{
login:string,
avatar_url:any,
score:number
}

离子G管搜索

transform(items: any[], terms: string): any[] {
if(!items) return [];
if(!terms) return items;
return items.filter( it => {
return it.score == terms; // only filter country terms
});
}

然后添加@ngModule声明数组

declarations: [
MyApp,
HomePage,
SearchPipe,
],

首页.html

<ion-content padding>
<ion-item>
<ion-searchbar floating [(ngModel)]="myInput" (ionInput)="getNames($event) "> Search</ion-searchbar>
</ion-item>
<ion-card *ngFor = "let post of posts?.items | search : myInput">
<ion-item>
<ion-avatar item-start>
<img [src] = "post?.avatar_url" alt="" />
</ion-avatar>
</ion-item>
<ion-card-content>
<p>Name : {{post.login}}</p>
<p>Score : {{post.score}}</p>
</ion-card-content>