角度视图在提交时未以正确的方式刷新

Question

我有一个在同一个html页面中具有不同视图的Angular页面。当我使用这个从selectoption中删除所选名称并按提交时，删除的名称仍在selectoption中。

<div class="container">
<div [hidden]="submitted">
<h1>Delete Person:</h1>
<form (ngSubmit)="onSubmit()" #deletePersonForm="ngForm">
<div class="form-group">
<label for="personInd">Name</label>
<select class="form-control" id="personInd"
required
[(ngModel)]="personInd.id" name="personInd"
#id="ngModel">
<option *ngFor="let ur of person" [value]="ur.id">{{ur.name}} 
</option>
</select>
</div>
<button type="submit" class="btn btn-success" >Submit</button>
</form>
</div>
<div [hidden]="!submitted">
<h3>Person deleted</h3>
<button type="submit" class="btn btn-success" (click)="onSubmit()"> 
Delete another Person
</button>
</div>
</div>

TS 呼叫：

onSubmit() {
if(this.submitted==false) {
this.httpServiceService.deletePersonById(this.personInd.id,this.person);
this.submitted = true;
}
else {
this.submitted = false;
}
}

和一项服务：

deletePersonById(id:number,personArr:Person[])
{
this.http.delete('//localhost:8080/deletePerson'+"/"+id)
.subscribe( data => {
personArr = personArr.filter(u => u !== personArr[id]);
});

}

但是服务工作正常，数据正确。如果我更新页面，它将正确更新，并且删除的名称将不存在。

提交按钮时有没有办法刷新。我读过很多不同的帖子，有些建议location.reload()但会重新加载整个页面，而不是选定的视图或div。

有什么建议吗？

Answer 1

您的删除工作正常。删除后视图不是最新的问题会导致您更新personArr的方式。

您将对本地 person 数组的引用作为参数传递给deletePersonById。在此方法中，您将使用内置过滤器功能从数组中删除已删除的人员。但是此函数返回一个新数组，并且不会更新现有数组，因此更改不会反映在组件的数组中。您必须将新数组返回到组件，或者需要在成功删除后更新那里的数组。

我建议通过以下方式删除组件中已删除的人：

onSubmit() {
...
// After successful deletion
this.person = this.person.filter(person => person.id !== this.personInd.id);
...
}  

Answer 2

成功执行删除后，您还必须从本地person数组中手动将其删除。

试试这个：

onSubmit() {
// After you delete the person
const personToDelete = this.person.filter(person => person.id === personInd.id)[0];
this.person.slice(this.person.indexOf(personToDelete), 1);
}