Question

我终于以角度2制作了我的应用程序。除了一件事，一切都解决了。当我将项目添加到我的表或编辑它时，我无法看到更改，直到我刷新页面或单击例如下一页按钮（我已实现分页）。我包括：

<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

按此顺序。我添加项目的方法非常简单：

 addDepartment(item){
    this._departmentService.addDepartment(item)
                  .subscribe(departments => this.department = departments.json());

     this.getAll();}

当我添加项目，并在get方法上放置断点时，它被正确调用，我从我的数据库中获取正确的信息，但我不知道为什么视图不会刷新。你知道为什么会这样吗？谢谢你的建议！

编辑：部门只是部门：部门，其中部门是与属性（departmentNo，departmentName，departmentLocation）的接口。添加项目的视图如下所示：

  <form [ngFormModel]="myForm"  
          (ngSubmit)="addDepartment(newItem); showAddView=false" [hidden]="!showAddView"  align="center">
        <div>       
            <label for="editAbrv">Department name:</label><br>
              <input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']"  > 

         <div *ngIf="myForm.controls['departmentName'].hasError('required')"  class="ui error message"><b style="color:red;">Name is required</b></div>  
      </div>
       <br/>
        <div>
            <label for="editAbrv">Department Location:</label><br>
             <input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" > 

         <div *ngIf="myForm.controls['departmentLocation'].hasError('required')" class="ui error message"><b style="color:red;">Location is required</b></div>  
      </div> 

       <br/>
        <div>
            <button type="submit" [disabled]="!myForm.valid"  class="ui button">Add item</button>  
            <button><a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a></button>
        </div>
</form>

我的部门表是：

<table align="center">
        <thead>
            <tr> 
                <td>#</td>
                <td><strong>Department</strong></td>
                <td><strong>Department Location</strong></td>
                <td><strong>Edit</strong></td>
                <td><strong>Delete</strong></td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="#department of departments | searchString:filter.value  ; #i = index">
                 <td>{{i + 1}}.</td>  
                <td> {{department.departmentName}}</td>
                <td>{{department.departmentLocation}}</td>
                <td>
                    <button class="btnEdit" (click)="showEdit(department)">Edit</button>
                </td>
                <td>
                    <button class="btnDelete" (click)="deleteDepartment(department)" >Delete</button>

                </td>
            </tr>

        </tbody>
    </table>

Answer 1

使用此代码，您不必等待addDepartment请求的响应并直接执行getAll请求。

addDepartment(item){
  this._departmentService.addDepartment(item)
              .subscribe(departments => this.department = departments.json());

  this.getAll();
}

您应该在subscribe中注册的回调中将调用移动到getAll。此时，addDepartment实际上已完成，您可以重新加载列表...

代码可以像这样重构（因为我还没有addDepartment和getAll方法的内容，所以我猜错了：

addDepartment(item){
  this._departmentService.addDepartment(item)
              .subscribe(addedDepartment => {
                this.department = this.getAll();
              });
}

Answer 2

出现此问题的原因是您使用departmant的方式以及更改检测的工作原理。使用*ngFor="#department of departments"时，角度变化检测会在departments数组上查找对象引用。当您更新/更改此数组对象中的一个项时，对数组本身的引用不会更改，因此angular不会运行更改检测。

你几乎没有选择：

1）通过用具有更新值的新数组替换它来更改数组的引用

2）明确告诉角度运行变化检测（我认为在您的情况下更容易）：

constructor(private _cdRef: ChangeDetectorRef) {...}
addDepartment(item){
  this._departmentService.addDepartment(item)
    .subscribe(departments => this.department = departments.json());

  this.getAll();
  this._cdRef.markForCheck();
}

添加或编辑项目后，Angular 2不会更新我的视图

2 个答案: