Question

我在同一个htmlpage中有一个具有不同视图的Angularpage。当我使用该选项从select选项中删除所选名称，然后按Submit时，删除的名称仍在select选项中。

<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

删除成功完成后，还必须从本地sort!(l)阵列中手动删除它。

尝试一下：

person

Answer 2

您的删除工作正常。删除导致您更新switch(pos % 3){ case 0: *section1 = pos + 1; *section2 = pos + 2; break; case 1: *section1 = pos - 1; *section2 = pos + 1; break; case 2: *section1 = pos - 2; *section2 = pos - 1; }的方式后，您的视图不是最新的问题。

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

我建议使用以下方法删除您组件中已删除的人：

deletePersonById

在Submit

2 个答案: