Question

这里的第一个计时器......温柔。我搜索了很多，并没有找到任何具体似乎解决这个问题的东西。我们已采用Angular2作为单页应用程序。我有一个页面，其中有一个数据输入块，下面有一个网格。该页面调用＆＃34; get＆＃34;加载时填充网格的服务。单击数据输入区域中的提交按钮会调用＆＃34;添加＆＃34;执行存储过程并将数据插入postgre sql db的服务。都好。除此之外，我努力让网格刷新以显示新添加的行（甚至尝试在＆＃34; Add＆＃34之后调用＆＃34; Get＆＃34;服务）。到目前为止我见过的所有例子都只使用本地数组作为数据存储（pop，push来操作数据）。由于我们的数据存储在数据库中，因此这些示例并没有让我一路走来。 IContent是一个为数据建模的接口。 _contentList是一个IContent数组，由＆＃34; Get＆＃34;填充。服务。任何帮助表示赞赏！

更新：根据JB的建议，我在get服务中注释了缓存代码，并在add＆gt;服务调用之后添加了对get服务的显式调用。仍然有相同的行为。

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**...


}

Answer 1

您的服务返回缓存数据。它不应该。

让它每次调用 ，而不仅仅是第一次。否则，显然，它总是返回相同的陈旧数据。

Answer 2

只是在黑暗中拍摄，但您正在从服务返回的内容列表中替换内容列表。也许尝试清除绑定列表并添加从服务返回的内容。我假设如果用新实例替换整个列表，对列表的绑定将不起作用。

this._contentList = content [0] [“contentInfo”]; //清除this._contentList并从content [0] [“contentInfo”]

重建它

使用Angular 2服务向数据库添加数据，UI不刷新

2 个答案: