Question

我想在搜索栏中显示我的项目，我确实在互联网上查找但没有任何作用，我没有得到任何错误，但我没有得到任何项目在我的内容中显示。这里留下我的html和ts文件。变量是西班牙语，对不起

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons start
                 [navPush]="home">
      <button ion-button icon-only color="white">
        <ion-icon name="ios-arrow-back"></ion-icon> Inicio
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button
              clear color="white"
              [navPush]="listaTerminada">LISTO</button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding class="backgroundd">
  <ion-searchbar (ionInput)="getItems($event)">
    <ion-list>
      <ion-item *ngFor="let articulo of listaProductos">{{articulo.nombre}}</ion-item>
    </ion-list>
  </ion-searchbar>
</ion-content>


import {Component, OnInit} from '@angular/core';
import { NavParams } from 'ionic-angular';
import {HomePage} from "../home/home";
import {ListaTerminadaPage} from "../lista-terminada/lista-terminada";
import {Articulo} from "../../Data/articulo.interface";

@Component({
  selector: 'page-elegiritems',
  templateUrl: 'elegiritems.html',
})
export class ElegiritemsPage implements OnInit{
  home=HomePage;
  listaTerminada=ListaTerminadaPage;
  listaProductos :Articulo[]=[];



  constructor(public navParams: NavParams) {
  }

  ngOnInit(){
    this.listaProductos = this.navParams.data;
  }

  getItems(ev:any){
    this.listaProductos = this.navParams.data;

    let val = ev.target.value;

    if (val && val.trim() != ''){
      this.listaProductos = this.listaProductos.filter((item: any) => {
        return (item.nombre.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

Answer 1

可能的问题是，如果您将列表移动到搜索栏下方显示任何内容，则ion-list位于ion-searchbar内？也是填充的数组不是列表，还是没有填充的数组？

带有对象的离子搜索栏不会显示任何内容

1 个答案: