我正在使用Angular2和MVC。我跟随了很多关于angular.io的教程，但改变了一些事情来实现我自己的解决方案。基本上我有一个显示客户端及其标识号的表。使用模拟数据，我能够检索客户端并添加新客户端。新的将更新我的clientList并在我的显示表中显示新客户端。
一旦我开始将其转换为服务器以获取和发布数据，我就开始遇到问题。
我能够从服务器中完美地检索数据，它可以提供我期望的输出。当我尝试将新的一个发布到服务器时，它完全进入我的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，但它实际上并没有改变我的表的视图。
我怎样才能让它更改我的表并更新它以显示它已被添加？
答案 0 :(得分：1)
这是我认为正在发生的事情。当您在getClients()内拨打ClientFormComponent时，它会用新数组替换clientsList。但是，视图中的一个是getClients()在AppComponent内分配的数组。一种确保方法是评论ClientFormComponent内的行：
ngOnInit() {
//this.getClients();
}
答案 1 :(得分：1)
也许重点是你要调用getClients()方法的ClientService两次，一次来自AppComponent，一次来自ClientFormComponent。
这意味着您将获得2个不同的数组，其中一个保留在AppComponent中，另一个保存在ClientFormComponent中。
如果我说的是正确的，那么当您通过POST命令添加新客户端时，ClientFormComponent会更新其数组，但这对AppComponent数组没有影响（这是一个不同的对象）。
在这种情况下的解决方案可能是：
1）让AppComponent将其clients数组传递给ClientFormComponent，例如<client-form [clientList]="clients"></client-form>（这可能是clientList前面@Input()的原因{1}}）
2）避免像地狱重置clientList ClientFormComponent（当前正在行this.clientList = clients中发生的那样）
我希望我没有错过任何东西，这可以提供帮助。
PS：我猜你在AppComponent中不需要@Injectable（），因为它是一个组件
答案 2 :(得分：0)
更改行：
公共客户：客户[];
到
公共客户：客户[] = [];