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

Question

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

home.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>

home.ts

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

你好，你可以试试这样的

home.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>

home.ts

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,
],

home.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>