Question

我有一个组件，它显示一个对象表，每行有一个按钮，调用一个函数来修改所选对象的属性。即使按钮有效并且确实修改了属性，我也必须手动重新加载视图以查看表中的更改。

这些功能如下：

accept(id: string) {
    this.service.accept(id).subscribe(
        data => {
            console.log('done');
        },
        error => {
            console.log('error'):
        });
}

我服务上的接受方法如下：

accept(id : string){
    return this.http.put('/myUrl/' +id).map(res => res.json());     
}

我希望视图在我按下正确显示新值的按钮时“重新加载”，而无需手动重新加载页面。这可能和/或我做错了吗？

编辑1

以下是我提到的按钮的html表的更多代码：

<table class="table">
<thead class="thead-default">
        <tr>
            <th>Title</th>
            <th>Date</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td>{{item.title}}</td>
            <td>{{item.date| date: 'dd/MM/yyyy'}}</td>
            <td *ngIf="item.status== 0">Pending</td>
            <td *ngIf="item.status== 1">Accepted</td>
            <td *ngIf="item.status== 0">
                <button (click)='accept(item.id)'>Accept</button>
            </td> 
        </tr>
    </tbody>
</table>

编辑2

我刚刚在原始代码中意识到这部分代码：

aceptar(id: string) {
    this.propuestaService.aceptarPropuesta(id).subscribe(
        data => {
            this.msg = 'Propuesta Aceptada';
        },
        error => {
            console.log('error'):  <----- Didn't have this here
        });
}

我没有console.log（'error'）行，我还有别的东西，我在这里添加它只是为了简化问题。我现在看到控制台正在说错误正在发生，所以可能在该部分出现了一些错误，阻止了对视图的更改。当我手动重新加载时，值仍会改变。

错误说：

SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at Response.Body.json (http.umd.js:753)
at MapSubscriber.eval [as project] (MyService.ts:41)
at MapSubscriber._next (map.ts:79)
at MapSubscriber.Subscriber.next (Subscriber.ts:95)
at XMLHttpRequest.onLoad (http.umd.js:1083)
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (core.umd.js:6078)
at ZoneDelegate.invokeTask (zone.js:264)
at Zone.runTask (zone.js:154)
at XMLHttpRequest.ZoneTask.invoke (zone.js:335)

Answer 1

您需要在进行更改后从数据库中获取值。在没有告诉应用程序这样做的情况下，值不会神奇地出现;）这就是为什么在进行硬刷新之后，当初始化时从数据库中获取值时，您会看到更改的原因。

因此，在修改并保存更改后，需要再次调用api来检索值，如下所示：

accept(id: string) {
    this.service.accept(id).subscribe(
        data => {
            console.log('done');
            this.getData(); // add your equivalent for fetching data here!
        },
        error => {
            console.log('error'):
        });
}

更改angular2后重新加载视图数据

1 个答案: