ОШИБКА TypeError: Невозможно прочитать свойство 'filter' из null

Question

Я новичок в ANGULAR, и я пытаюсь создать приложение, которое может отображать пользователей в базе данных с возможностью обновления или удаления (красная кнопка на фотографии ниже) пользователя. если у меня> 1 пользователь, кнопка «Удалить» удалит этого пользователя из базы данных и сразу же скроет его со страницы, но у меня будет только один пользователь, и нажмите «Удалить», пользователь будет также удален из базы данных, но все еще на странице, если я refre sh страницы.

users = [];

ngOnInit

  ngOnInit() {
    this.reloadData();
  }

Функция ReloadData:

  reloadData() {
    this.userService
      .getUsersList()
      .pipe(map(arr => arr.filter(r => r.active == true)))
      .subscribe(result => {
        this.users = result;
      });
  }

Функция удаления

  deleteEmployee(id: number) {
    this.userService.deleteUser(id).subscribe(
      data => {
        console.log(data);
        this.reloadData();
      },
      error => console.log(error)
    );
  }

Метод обслуживания пользователя:

getUsersList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);

}

код Html:

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card card-plain" data-aos="fade-right">
          <div class="card-header " style="background-color: #09c0a3;">
            <h4 class="card-title mt-0" style="color:white;">
              Tableau des Utilisateurs
            </h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead class="">
                  <th>
                    ID
                  </th>
                  <th>
                    Nom
                  </th>
                  <th>
                    Prénom
                  </th>
                  <th>
                    Email
                  </th>
                  <th>
                    Role
                  </th>
                  <th>
                    Actions
                  </th>
                </thead>
                <tbody>
                  <tr *ngFor="let u of users">
                    <td>
                      {{ u.id }}
                    </td>
                    <td>
                      {{ u.nom }}
                    </td>
                    <td>
                      {{ u.prenom }}
                    </td>
                    <td>{{ u.email }}</td>
                    <td>
                      <span *ngFor="let r of u.roles">{{ r }} </span>
                    </td>
                    <td>
                      <button
                        class="btn btn-danger "
                        (click)="deleteEmployee(u.id)"
                      >
                        Supprimer
                      </button>

                      <button class="btn " (click)="OnEdit(u.id)">
                        Details
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

фотография, чтобы прояснить ситуацию

, как вы видите на втором изображении, пользователь был удален ( {удалено: true}), но все еще отображается на странице, и возникает ошибка

Answer 1

Вы получаете эту ошибку, потому что служба возвращает значение null или undefined, а ваш код не обрабатывает эти значения.

Либо очистите службу, чтобы она всегда возвращала действительное значение, либо измените Ваш код в классе компонентов. Используйте код ниже:

.pipe(map(arr => arr && arr.length && arr.filter(r => r.active == true)))

Проверьте правильность данных перед фильтрацией