Error in typescript function - function executes only once

#1

Good evening!

I have a problem with a function in Typescript (Ionic 2). The function performs a search / filter from the contents of the tags. The user enters the number they want to fetch and the function filters from the number entered. The first time the query screen is called, the function executes normally, without problem, and can even perform several searches. However, when you exit the screen and return to it for more queries, the search no longer works, it does not perform the filtering. Can anyone help solve this problem?

myFunction () {

    this.input = document.getElementById ("myInput");
    this.filter = this.input.value.toUpperCase ();
    this.ul = document.getElementById ("myUL");
    this.li = this.ul.getElementsByTagName ("li");

    for (this.i = 0; this.i <this.li.length; this.i ++)
    {
      this.a = this.li [this.i] .getElementsByTagName ("a") [0];

      if (this.a.innerHTML.toUpperCase (). indexOf (this.filter)> -1)
      {
          this.li [this.i] .style.display = "";
      } else {
          this.li [this.i] .style.display = "none";
      }
    }

}
Thanks in advance.

#2

This is horrendous. Angular is in charge of the DOM, not your controller code. Refactor this to use structural directives such as ngFor.

1 Like
#3

thanks for the suggestion but ngfor will not satisfy my solution. The traditional search mode in the documentation does not help me in this case

#4

Please rethink your design. You may have come from another framework, but what you are doing is extremely unidiomatic for Angular, and if you persist in the way you are thinking, you will be fighting the framework forever.

#5

Thank you for your attention!