Как передать данные HTML-файл в файл .ts в Ionic (последний) из ввода строки поиска - PullRequest
Новая
       7

Как передать данные HTML-файл в файл .ts в Ionic (последний) из ввода строки поиска

0 голосов
/ 24 мая 2018

Код ниже содержит представление и .ts.Я хотел ввести входные данные в строке поиска, входные данные должны быть переданы из html в .ts, а запрашиваемые мною данные Json должны быть правильно отфильтрованы в соответствии с переданными данными. URL-адрес API равен https://api.github.com/search/users?q=dines,, гдеЕсли значение 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
}

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Здравствуйте, Вы можете попробовать что-то вроде этого

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
}

поиск ионных каналов 

 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>
0 голосов
/ 24 мая 2018 

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