Question

我是ANGULAR的新手，我试图构建一个可以在数据库中显示用户的应用程序，并可以更新或删除用户（下图中的红色按钮）。如果我有> 1个用户，则删除按钮将从数据库中删除该用户，并立即将其从页面中隐藏，但是fi只有一个用户，然后按Delete键，该用户也将从数据库中删除，但仍会在页面中，除非我刷新页面。

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>

a photo to make things more clear

as you see in this second image the user has been deleted ({deleted:true}) but still display on the page and an error occurs

Answer 1

由于服务正在返回null或undefined值，并且您的代码未处理这些值，因此您收到此错误。

要么清理您的服务，使其始终返回有效值，要么修改组件类中的代码。使用以下代码：

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

在过滤之前检查数据的有效性

错误TypeError：无法读取null的属性“ filter”

1 个答案: