Question

我创建了一个包含angular2 for front-end的项目，我还创建了webapi项目来使用数据库中的数据。控制器代码返回模型：

UserInfo = JsonConvert.DeserializeObject<List<UsersVM>>(Response);

我想在我的角度视图中迭代这个数据模型。我trid创建角度http调用。但这在我的情况下是不可接受的。我需要从我的mvc控制器调用webapi，只是从angular2视图中渲染数据。

角度模型是：

export interface IUser {
Id: number;
ProductName: string;
ProductPrice: string;

}

Angular服务代码是：

import {
Injectable
} from '@angular/core';
import {
Http, Response, RequestOptions,
Request, RequestMethod, Headers
} from '@angular/http';
import {
   IUser
} from './user';

import {
Observable
} from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
private _productUrl = 'Home/GetAllProducts';  
constructor(private _http: Http) { }   
getProducts(): Observable<IUser[]> {        
    return this._http.get(this._productUrl)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);
}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}
 }

坚持这一点，谷歌中的任何链接都无法正确解决我的问题。请指导。感谢

Answer 1

您可以使用ngFor和AsyncPipe

<div *ngFor="let user of getProducts() | async">
    {{user.Id}}
    {{user.ProductName}}
    {{user.ProductPrice}}
</div>

Answer 2

您已经提到_productUrl作为您的API路径，但它应该是具有域名和操作调用的实际API URL。

as：

private _productUrl = 'localhost:50962/products/';

例如

Service.ts

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions,Request, RequestMethod, Headers } from '@angular/http';
import { IUser } from './user';    
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

  private _productUrl = 'localhost:50962/products/';

  constructor(private _http: Http) { }   

  getProducts(): Observable<IUser[]> {   

    let header = this.initHeaders();
    let options = new RequestOptions({ headers: header, method: 'get' });

    return this._http.get(this._productUrl + 'getAllProducts', options)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);
  }

  private initHeaders(): Headers {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    return headers;
  }

  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

您还可以为API设置环境变量，并在所有服务中使用它。 environment.API

export const environment = {
  API: 'http://localhost:50962/',
  WordPressAPI: 'http://localhost:58451/',
  FacebookClientId: '45******',
}


return this._http.get(environment.API + 'products/getAllProducts', options)
        .map((response: Response) => <IUser[]>response.json().value)
        .catch(this.handleError);

Answer 3

两者的组合（使用完整路径）Amol Bhor＆amp; Leon，而是将uri vars转换为env文件使用constants.ts文件，因为对我来说环境与dev或prod环境有关。并且为了避免内存泄漏使用asyn管道，如果不使用取消订阅onDestroy方法。检查文档以获取详细信息。

如何使用angular2从mvc控制器显示数据

3 个答案: