错误类型错误： 无法读取 null 的属性'filter'

Question

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

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>

一张照片，使事情更清楚

正如你在第二张图片中看到的那样，用户已经被删除(｛deleted:true｝(，但仍然显示在页面上，并且出现错误

Answer 1

您收到此错误是因为服务返回null或undefined值，而您的代码没有处理这些值。

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

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

过滤前检查数据的有效性