0
我正在使用Angular2和MVC。我跟着很多关于angular.io的教程，但改变了一些东西来实现我自己的解决方案。基本上我有一个表格显示客户端及其标识符号码。使用模拟数据，我能够检索客户端并添加新的客户端。新的将更新我的clientList并在我的显示表中显示新的客户端。Angular 2 Post更新我的列表，但不更改视图
一旦我开始转换这个命中服务器来获取和发布数据，我开始有问题。
我能够从服务器上完美地检索数据，它给了我期望的输出。当我尝试发布一个新的服务器时，它进入我的post方法非常好。它将值推入我的clientList，但不更新我的显示表。
我想补充一点，我实际上并没有将数据添加到服务器端的列表中，我只是简单地返回一个新对象来试图让它更新我的视图。
这里是我的服务：
import {Injectable} from 'angular2/core';
import {Client} from './client';
import {RequestOptions, Http, Response, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ClientService {
constructor(private http: Http) { }
getClients(): Observable<Client[]> {
return this.http.get('/Client/GetClients')
.map(this.extractData);
}
addClient(client: Client): Observable<Client> {
let clientUrl = '/Client/AddClient';
let body = JSON.stringify({ client });
let header = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: header });
return this.http.post(clientUrl, body, options)
.map(this.extractData)
.catch(this.handleError);
}
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 || {};
}
private handleError(error: any) {
// In a real world app, we might send the error to remote logging infrastructure
let errMsg = error.message || 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}
我的应用程序组件：
@Component({
selector: 'my-app',
templateUrl: 'Scripts/typescript/app.component.html',
directives: [ClientFormComponent, MODAL_DIRECTIVES],
providers: [ClientService, HTTP_PROVIDERS]
})
@Injectable()
export class AppComponent implements OnInit {
constructor(private _clientService: ClientService) { }
currentClient: Client;
@ViewChild('modal')
modal: ModalComponent;
public clients: Client[];
public errorMessage: string;
ngOnInit() {
this.getClients();
}
getClients() {
this._clientService.getClients().subscribe(clients => this.clients = clients, error => this.errorMessage = <any>error);
}
deleteClient() {
var index = this.clients.indexOf(this.currentClient, 0);
if (index > -1) {
this.clients.splice(index, 1)
}
}
close() {
this.modal.close();
}
open(client: Client) {
this.currentClient = client;
this.modal.open();
我与调用服务组件，当我点击添加按钮：
@Component({
selector: 'client-form',
templateUrl: 'Scripts/typescript/client-form.component.html'
})
export class ClientFormComponent
{
constructor(private _clientService: ClientService) { }
@Input() clientList;
model = <Client>{ name: 'Bob', npi: 12345678 };
submitted = false;
active = true;
errorMessage: string;
onSubmit() { this.submitted = true; }
ngOnInit() {
this.getClients();
}
getClients() {
this._clientService.getClients()
.subscribe(
clients => this.clientList = clients,
error => this.errorMessage = <any>error);
}
addClient() {
this._clientService.addClient(this.model)
.subscribe(
client => this.clientList.push(client),
error => this.errorMessage = <any>error);
}
}
这里是我显示表格的模板，它是app.component.html：
<h1>Client/NPI Cross Reference</h1>
<client-form></client-form>
<table class="table">
<tr style="font-weight: bold;">
<td>Client</td>
<td>NPI</td>
<td>Date Added</td>
<td></td>
</tr>
<tr *ngFor="#client of clients;">
<td>{{client.name}}</td>
<td>{{client.npi}}</td>
<td>{{client.dateAdded}}</td>
<td>
<span style="color: red; font-size: 16px; cursor: pointer;" class="glyphicon glyphicon-trash" aria-hidden="true" (click)="open(client)"></span>
</td>
</tr>
</table>
<modal #modal [animation]="animationsEnabled" (onClose)="deleteClient()" (onDismiss)="dismissed()">
<modal-header [show-close]="true">
<h4 class="modal-title">Delete</h4>
</modal-header>
<modal-body>
Are you sure you want to delete this entry?
</modal-body>
<modal-footer>
<button type="button" class="btn btn-primary" (click)="modal.close()">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">No</button>
</modal-footer>
</modal>这里是我的表单模板的html：
<div class="container">
<form *ngIf="active" (ngSubmit)="onSubmit()" #clientForm="ngForm">
<div class="form-group" style="float: left;">
<label for="clientid">Client Id:</label>
<input type="text" class="form-control" required [(ngModel)]="model.name" ngControl="name" #name="ngForm" #newClient>
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
<div class="form-group" style="float: left; padding-left: 10px;">
<label for="npi">NPI:</label>
<input type="number" class="form-control" required [(ngModel)]="model.npi" ngControl="npi" #newNpi>
</div>
<div style="float: left; margin: 25px 0 0 10px;">
<button type="submit" class="btn btn-default" (click)="addClient()" [disabled]="!clientForm.form.valid">Add</button>
</div>
</form>
</div>
<br style="clear:both;" />在服务器端，我只是简单地返回一个JSON客户端：
[HttpPost]
public JsonResult AddClient()
{
var client = new Models.Client();
client.name = "test";
client.npi = 12345;
client.dateAdded = DateTime.Now.ToShortDateString();
return Json(client);
}
当使用模拟数据时，它会自动更新我的表格，我可以在表格中看到我的新客户端。但现在我正在使用服务器，它将其添加到clientList，但它实际上并没有改变我的表的视图。
我如何获得它来更改我的表格并更新它以显示它已被添加？
您能否提供显示表格的方式？谢谢！ –
为两个模板添加了html。 – Bohms27