1
这里的第一个计时器......保持温和。我搜索了很多，并没有找到任何具体解决这个问题的方法。我们已经采用Angular2作为单页应用程序。我有一个页面，它有一个数据输入块，下面有一个网格。加载时，页面会调用“get”服务来填充网格。单击数据输入区域中的提交按钮调用一个“添加”服务，该服务执行存储过程并将数据插入到Postgre sql数据库中。都好。除此之外，我努力让网格刷新以显示新添加的行（甚至在“添加”之后尝试调用“获取”服务）。我所见过的所有例子都只使用本地数组作为数据存储（pop，push来操纵数据）。由于我们的数据被保存在数据库中，所以这些示例并不能完全帮助我。 IContent是模拟数据的接口。 _contentList是一个IContent数组，并由“Get”服务填充。任何帮助感谢！使用Angular 2服务将数据添加到数据库，UI不会刷新
更新：每JB的建议，我注释掉在得到服务的缓存代码并添加显式调用的得到服务后的附加>服务调用。仍然有同样的行为。
MainComponent：
import {Component} from 'angular2/core';
import {IContent} from '../../classes/interfaces';
import {ContentService} from '../../services/content.service';
...
import {OnInit} from 'angular2/core';
import {ControlGroup, FormBuilder, Validators} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'view',
templateUrl: 'src/views/the-view.html',
providers: [ContentService],
directives: [ROUTER_DIRECTIVES, MdToolbar, MdButton, MdCard, MD_LIST_DIRECTIVES, MdInput],
})
export class ContentMgmtComponent {
public _contentList: IContent[];
myForm: ControlGroup;
contentAdded: boolean = false;
constructor(private _formBuilder: FormBuilder, private _contentService: ContentService) {
// Programmatically build out form
this.myForm = _formBuilder.group(
{
pageID: ["", Validators.compose([Validators.required])],
zoneID: ["", Validators.required],
contentText: ["", Validators.compose([Validators.required, Validators.maxLength(10)])],
startDate: ["", Validators.required],
endDate: ["", Validators.required]
});
// Get existing pages/content
this._contentService.getAllContent()
.subscribe((content: IContent[]) => {
this._contentList = content[0]["contentInfo"];
});
}
//Add the new content to the database.
onAddContentClick(pageId: string, zoneId: string, contentText: string, startDate: string, endDate: string) {
this._contentService.addContent(pageId, zoneId, contentText, startDate, endDate)
this.contentAdded = true;
// *** PROBLEM BE HERE ... tried calling the Get Service, etc. ***
}
}
的的-view.html的部分应该刷新：
<div class="panel panel-primary">
<div class="panel-heading"><h4>Nova Custom Content Manager</h4> </div>
<div class="panel-body">
<table class="col-md-12 table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>Content Id</th>
<th>Page Id</th>
<th>Zone Id</th>
<th>Content</th>
<th>Active FL</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr class="info" *ngFor="#contentItem of _contentList">
<td>{{contentItem.contentID}}</td>
<td>{{contentItem.pageID}}</td>
<td>{{contentItem.zoneID}}</td>
<td>{{contentItem.contentText}}</td>
<td>{{contentItem.activeFlag}}</td>
<td>{{contentItem.startDate}}</td>
<td>{{contentItem.endDate}}</td>
</tr>
</tbody>
</table>
</div>
服务：
import {Injectable} from 'angular2/core';
import {Http, Response, Headers, RequestOptions, URLSearchParams} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {IContent} from '../classes/interfaces';
import {Observer} from 'rxjs/Observer';
@Injectable()
export class ContentService {
content: IContent[]; //returned by the actual service call to the consumer
constructor(private http: Http) {
}
addContent(_pageId: string, _zoneId: string, _content: string, _startDate: string, _endDate: string) {
let body = JSON.stringify({ pageID: _pageId, zoneID: _zoneId, contentText: _content, activeFlag: "true", startDate: _startDate, endDate: _endDate });
let headers = new Headers({ 'content-type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post('http://whereever.com/api/addcontent', body, options)
.subscribe(
data => console.log(data),
err => console.log(err.json().message),
() => console.log('Authentication Complete')
);
}
getAllContent(): Observable<IContent[]> {
if (!this.content) {
//return this.http.get("/src/services/content.json")
return this.http.get("http://whereever.com/api/getallcontents")
.map((res: Response) => {
this.content = res.json();
return this.content;
})
.catch(this.handleError);
}
else {
//return cached data
return this.createObservable(this.content);
}
}
private extractData(res: Response) {
if (res.status < 200 || res.status >= 300) {
throw new Error('Bad response status: ' + res.status);
}
let body = res.json();
return body.data || { };
}
**strong text**...
}
JB：即使我注释掉Get中的缓存代码，它仍然不会在添加后刷新......即使在添加后明确调用一个get。 – ibejo
然后用更新的代码更新你的问题。有可能是其他的东西是错的。 –
您仍然返回缓存的数据。管理员在帖子后仍然不会打电话给您的服务。删除服务中的“内容”字段。删除方法中的if/else。添加用于刷新数据的代码。这就是整个问题所在。提示：您必须在帖子**成功后**刷新数据**。 –