Ionic 3 Search 取消时不刷新列表答案

【问题标题】：Ionic 3 Search not refreshing list on cancelIonic 3 Search 取消时不刷新列表
【发布时间】：2018-08-08 00:04:32
【问题描述】：

我不知道问这个问题的更好方法。我在 ionic 中添加了一个搜索栏，它似乎正在工作。问题是如果我单击搜索栏上的取消图标，列表/内容不会返回。

这是我的.html

    <ion-header>

    <ion-navbar >
    <ion-title>Worship and Fellowship</ion-title>
    </ion-navbar>
        <ion-searchbar 
        (ionInput)="getItems($event)">
        </ion-searchbar>
</ion-header>


<ion-content padding>

  <ion-list inset>

    <ion-item *ngFor="let lesson of lessons; index as i;" slice:0:10>

<h4 (click)="loadLesson(lesson)" tapable>{{ lesson.title | uppercase }}</h4>

    </ion-item>
</ion-list>

</ion-content>

这是我的 .ts

@IonicPage()
@Component({
  selector: 'page-section1',
  templateUrl: 'section1.html',
})
export class Section1Page {


  //public lessons = new Array();

  ID:number;
  lessons:Lessons[];
 // section1: any[];



  constructor(public navCtrl: NavController, public navParams: NavParams, private cdata: ChorusdataProvider) {


    this.cdata.getData().subscribe(lists => {
    console.log("lessons are here", lists['section1']);
    this.lessons = lists['section1'];
  });

  }  


  initializeItems() {
    this.lessons = this.lessons;
  }

  getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.lessons = this.lessons.filter((lesson) => {
        return (lesson.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
  }

我不知道我做错了什么。我希望如果有人使用搜索栏，然后点击那个小取消图标，内容列表应该刷新到原始状态，就像任何其他搜索栏一样。我哪里错了？

【问题讨论】：

标签： angular typescript ionic3

【解决方案1】：

因此，在您的情况下，您只需“改变”您的原始列表，而不是保持原始列表不变以重置其状态。

尝试使用带有“快照”的方法，并且当您重置可搜索列表时，请防止仅分配另一个数组，因为它将仅通过引用传递。

@IonicPage()
@Component({
    selector: 'page-section1',
    templateUrl: 'section1.html',
})
export class Section1Page {

    ID: number;
    // searchable list holder array:
    lessons: Lessons[];
    // snapshot of original list array:
    lessonsSnapshot: Lessons[];

    constructor(public navCtrl: NavController, public navParams: NavParams, private cdata: ChorusdataProvider) {
        this.cdata.getData().subscribe(lists => {
            console.log("lessons are here", lists['section1']);
            // create snapshot:
            this.lessonsSnapshot = lists['section1'];
            // populate view:
            this.lessons = lists['section1'];
        });

    }


    initializeItems() {
        // use spread to create brand new array off snapshot
        this.lessons = [...this.lessonsSnapshot];
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the ev target
        var val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.lessons = this.lessons.filter((lesson) => {
                return (lesson.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }
}

【讨论】：