使用Angular 2服务将数据添加到数据库,UI不会刷新
这里的第一个计时器......保持温和。我搜索了很多,并没有找到任何具体解决这个问题的方法。我们已经采用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**...
}
您的服务返回缓存的数据。它不应该。
使它成为一个http请求每次它被称为,不只是第一次。否则,显然,它总是返回相同的陈旧数据。
只是在黑暗中拍摄,但您正在从服务返回的内容列表中替换您的内容列表。也许尝试清除绑定列表并添加从服务返回的内容。我假设如果你用一个新实例替换整个列表,绑定到列表将不起作用。
this._contentList = content [0] [“contentInfo”]; //清除this._contentList并从内容[0] [“contentInfo”]重建它
JB:即使我注释掉Get中的缓存代码,它仍然不会在添加后刷新......即使在添加后明确调用一个get。 – ibejo
然后用更新的代码更新你的问题。有可能是其他的东西是错的。 –
您仍然返回缓存的数据。管理员在帖子后仍然不会打电话给您的服务。删除服务中的“内容”字段。删除方法中的if/else。添加用于刷新数据的代码。这就是整个问题所在。提示:您必须在帖子**成功后**刷新数据**。 –