如何将数据传输到Ionic（最新）的html文件到.ts文件中

Question

以下代码带有视图和.ts。我想在搜索栏中输入一个输入，输入必须从html传递到.ts，我要求的Json数据应该根据传递的数据正确过滤.API Url是How to open a PDF via Intent from SD card，其中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>