Невозможно прочитать свойство 'includes' из undefined при попытке применить фильтр на основе ввода пользователя

Question

Я пытаюсь применить этот простой фильтр, примененный к запросу списка, который с каждым вводом списка сужает возможности

HTML:

 <mat-form-field>
                <mat-label>Search for users</mat-label>
                <input #query type="text" matInput placeholder="search" (keyup)="filter(query.value)">
            </mat-form-field>
            <div *ngIf="filteredUsers">

И функция:

filter(query){
    this.filteredUsers= query?
    this.users.filter(user=>user.username.includes(query)):
    this.users;
  }


                <ul *ngFor="let u of filteredUsers">
                    <li>
                        {{u.username}}
                    </li>
                </ul>
            </div>

Ошибка, которую я получаю при вводе идентификатора символа, который не определен фильтром, но, поскольку оба массива fileterdUsers и Users заполнены, я не могу понять, почему возникает эта ошибка ... Любые идеи ?

РЕДАКТИРОВАТЬ: ngOninit:

ngOnInit(): void {
     this.dataService.getUsers()
    .pipe(first())
    .subscribe(users=>{

      this.filteredUsers=this.users=users;
      console.log(users, this.filteredUsers) -> i get the data
    }) 
  }

Редактировать 2:

РЕДАКТИРОВАТЬ

filter(query){
    console.log(this.users)
    this.filteredUsers= query?
    this.users.filter(user=>user.username.includes(query)):
    this.users;
    console.log(this.users)
  }

Вот так, я не вижу никаких журналов ...

РЕДАКТИРОВАТЬ 3: снимок

Хорошо, может быть, я имею представление о том, что происходит. Первые элементы моего ngFor пусты, как вы можете видеть на картинке. Это причина жалобы Angular? (ваше последнее исправление тоже не помогло)

Answer 1

Если console.log не регистрирует ваш массив, это означает, что он пуст во время вызова фильтра (запроса). И я только что заметил, что то, как вы назначаете массив, на самом деле не то, что вам нужно, поскольку массивы работают по ссылке.

ngOnInit(): void {
     this.dataService.getUsers()
    .pipe(first())
    .subscribe(users=>{
      this.filteredUsers=users;
      this.users=users; //just to be sure
      console.log(users, this.filteredUsers) -> i get the data
    }) 
  }

filter возвращает массив, поэтому я думаю, вы хотите назначить это filterUser. Я удалил бессмысленный код.

filter(query){
    console.log(this.users)
    this.filteredUsers = query ? this.users.filter(user=> user.username && user.username.includes(query)): this.users
    console.log(this.filteredUsers)
  }

Answer 2

С помощью и окружением @ukn я нашел решение: первые элементы массива - видимые на pi c - в этом случае пользователи были пустыми, поэтому решение заключалось в удалении этих элементов. Функция фильтра теперь работает правильно, давая мне имена при вводе одного символа. Список обновляется, пытаясь сопоставить введенные символы.