Question

我希望hide searchResults基于找到的elements，点击x按钮我要隐藏整个结果

backpress key在我的情况下也没有回复

这是我的演示：https://stackblitz.com/edit/ionic-1j9sbj?file=pages%2Fhome%2Fhome.ts

export class HomePage {


showSearchBar = true;  

haveSomeResults = false;

resultsData:any;

  searchResults = {
    "details": [{
        "user_id": "73",
        "email": "ejazanwar777@gmail.com",
        "token": "217808036f0215fee13aee8925574899"
    }, {
        "user_id": "74",
        "email": "hemanthraj2009@gmail.com",
        "token": "fe4fd5fa58075a69dd7e323cd0f1f2ad"
    }, {
        "user_id": "75",
        "email": "ggsgowtham17@gmail.com",
        "token": "9ed2839e54980a34e968e61d2bae362f"
    }, {
        "user_id": "76",
        "email": "contact@saddamhussain.com",
        "token": "e798b517a4171e1108e6809228c63c9c"
    }, {
        "user_id": "77",
        "email": "david123@gmail.com",
        "token": "5ddea6e5ebc38bbdb4cf48c828250f40"
    }, {
        "user_id": "78",
        "email": "sharukhkhan@gmail.com",
        "token": "d9494e94f1d1b1c5ea4eb509519a109c"
    }, {
        "user_id": "79",
        "email": "halwar@gmail.com",
        "token": "e80eb532f754cb30338bdd6b08cb11de"
    }, {
        "user_id": "81",
        "email": "hungama@gmail.com",
        "token": "ea060affe298542dd3498e3fa0ff3a9f"
    }, {
        "user_id": "82",
        "email": "haleem123@gmail.com",
        "token": "e0da36b6e3557ff64489de5c2a6d989f"
    }, {
        "user_id": "83",
        "email": "ejazanwa@gmail.com",
        "token": "117e4d5d2382ceb138c409640d1e33ac"
    }, {
        "user_id": "84",
        "email": "ejazanwar3457@gmail.com",
        "token": "0027c64433e84cbb9bf6e9a282c49c56"
    }, {
        "user_id": "85",
        "email": "ejazanwar77721@gmail.com",
        "token": "1c7cb381b8bf3f77764a54dc47dc74a5"
    }, {
        "user_id": "86",
        "email": "ejazanwar774547@gmail.com",
        "token": "e8049af25b5f866554ff3dc4abcbd74f"
    }, {
        "user_id": "87",
        "email": "ejazanwar777www@gmail.com",
        "token": "260c59d317fdf5c98f04a738653b888d"
    }, {
        "user_id": "88",
        "email": "ejazanwar77wqwq7@gmail.com",
        "token": "fe8d7166cf23ca540e275cbd154bdedb"
    }, {
        "user_id": "89",
        "email": "ejazanwar777sass@gmail.com",
        "token": "c6c263a682a600243ab502b21d1f4144"
    }, {
        "user_id": "90",
        "email": "ejazanwar77nndfnndf7@gmail.com",
        "token": "0b253d6ca088d7a409a57a249544ecd1"
    }, {
        "user_id": "91",
        "email": "ejazanwar777sasasa@gmail.com",
        "token": "9e13046ff6ab89827b8e63c389a97d5e"
    }, {
        "user_id": "92",
        "email": "ejazanwar777dxcvb@gmail.com",
        "token": "75323972b13cacd35a287e8a5b580e27"
    }, {
        "user_id": "93",
        "email": "ejazanwarewwe777@gmail.com",
        "token": "69ce1e6ffa5e34fcbb74e15e70d73cc3"
    }, {
        "user_id": "94",
        "email": "ejazanwar7dds77@gmail.com",
        "token": "f4e9a701f9dae581ecbc2abf1470f88f"
    }, {
        "user_id": "95",
        "email": "ejazanwar777rehrere@gmail.com",
        "token": "7937784df2d5d004d627795b80f39783"
    }, {
        "user_id": "96",
        "email": "ejazanwar777awddddd@gmail.com",
        "token": "73586d8c8a1ccb2305268526646dc83d"
    }, {
        "user_id": "97",
        "email": "ejazanwar77eqwew7@gmail.com",
        "token": "4ab7a92230fda8ab622ad8e3bc7e9376"
    }, {
        "user_id": "98",
        "email": "ejazanwar777dsggds@gmail.com",
        "token": "3481a3c17a752ef136a4eadeaa0813f4"
    }, {
        "user_id": "99",
        "email": "ejazanwar777@gmail.comsaasas",
        "token": "6bd7941c8b501f798c8854047a395bdf"
    }, {
        "user_id": "100",
        "email": "ejazanwar777jgfjgfjfg@gmail.com",
        "token": "127934324e39ad681826322632f91259"
    }, {
        "user_id": "101",
        "email": "ejazanwar777@gmail.comsddsbsdbsd",
        "token": "9125af9544be0515124e16f7171c36a7"
    }, {
        "user_id": "102",
        "email": "ejazanwar777@gmail.comdssdsd",
        "token": "48d0ac8443944489fb235444994ba44a"
    }, {
        "user_id": "103",
        "email": "ejazanwar777@gmail.comwwewewee",
        "token": "2585718f2b2d65610d681f8764f6baca"
    }, {
        "user_id": "104",
        "email": "ejazanwar777@gmail.comwq",
        "token": "88d84fadaafa36092a8099c5e28574d4"
    }, {
        "user_id": "105",
        "email": "ejazanwar777@gmail.combdbbdasd",
        "token": "3cdc18853781cf36ba4345fe6e431e0b"
    }, {
        "user_id": "106",
        "email": "ejazanwar777dfsghfd@gmail.com",
        "token": "39b2b79d0fa3e88c5f23bcdb56eefec4"
    }, {
        "user_id": "107",
        "email": "ejazanwar77adsfdasf7@gmail.com",
        "token": "1a6c860fc6d6a2875f4de371dee22b22"
    }, {
        "user_id": "108",
        "email": "ejazanwar777@gmail.comdddd",
        "token": "684aae9542ddc76f1f78c4360afe8846"
    }, {
        "user_id": "109",
        "email": "jhddfhfdfdhdhfjhj@gmail.com",
        "token": "069fe4f0ec2210c1e8eb9400486f1718"
    }, {
        "user_id": "110",
        "email": "ejazanwar777@gmail.comssdssdd",
        "token": "a10f3620d18466a0d5780749401052ad"
    }]
};


  constructor(public navCtrl: NavController) {

  }


  showSearchData($key){

     this.haveSomeResults = true;
  }

这是我的演示：https://stackblitz.com/edit/ionic-1j9sbj?file=pages%2Fhome%2Fhome.ts

请提前帮助我！

Answer 1

在任何情况下，到目前为止您都没有过滤数据，因此我假设您的问题是＆＃34;如何注册退格＆＃34;。您可以通过ngModelChange执行此操作，如下所示：

  <ion-searchbar *ngIf="showSearchBar" 
       (ngModelChange)="valuechange($event)" [(ngModel)]="searchkey"> 
  </ion-searchbar>

组件：

valuechange($key) {
    console.log($key);
    //filter your list through $key value
}

Answer 2

<ion-searchbar *ngIf="showSearchBar" (ngModelChange)="showSearchData($event)" [(ngModel)]="searchkey"> 
    </ion-searchbar>

检查此处的数据：

showSearchData($value){
    if($value)
     this.haveSomeResults = true;
     else
      this.haveSomeResults = false;
  }

工作解决方案：https://ionic-np1r5a.stackblitz.io

Answer 3

您可以在此处使用 ngModelChange 事件，然后您可以检查参数中是否存在该值，从而启用和禁用结果。

<ion-searchbar *ngIf="showSearchBar" (ngModelChange)="showSearchData($event)" [ngModel]="searchkey"> 
</ion-searchbar>

<强> DEMO

Answer 4

试试这个：

使用 * ngIf =＆＃34; searchkey＆＃34; 代替* ngIf =＆＃34; haveSomeResults＆＃34;

<ion-searchbar *ngIf="showSearchBar" (keypress)="showSearchData(searchkey)" [(ngModel)]="searchkey"></ion-searchbar>
<div *ngIf="searchkey">
    <ion-item *ngFor="let searchResult of searchResults?.details">
        <ion-avatar item-start>
        </ion-avatar>
        <h2>{{searchResult.user_id}}</h2>
        <h3>{{searchResult.email}}</h3>
        <p>{{searchResult.token}}</p>             
    </ion-item>     
</div>

如果找不到结果，如何隐藏结果数据

4 个答案: