从api获取数据时出现Angular 2错误

Question

I am creating a web API and fetch data using Angular 2 from server to client. But following Errors occurs. (Please see the links for error)

---

error Image in Link

error Image2 in Link

Chart Class

class ChartComponent {
models: Array<Model> = [];

constructor(public http: Http) {
    this.getData();
}

getData() {
    this.http.get('http://localhost:48512/api/data')
        .map(res => (<Response>res).json())
        .map((models: Array<any>) => {
            let result: Array<Model> = [];
            if (models) {
                models.forEach(model => {
                    result.push(
                        new Model(
                            model.imageUrl,
                            model.question,
                            model.answer
                            ));
                });
            }

            return result;
        }).
        subscribe(
        data => {
            this.models = data;
            console.log(this.models);
        },
        err => console.log(err)
        );
}}

Model Class

class Model {
constructor(
    public imageUrl: string,
    public question: string,
    public answers: string) {
}}

Controller

[Route("api/[controller]")]
public class DataController : Controller
{
    public IEnumerable<Description> Get() {
        return new List<Description> {

            new Description {
                ImageUrl="",
                Question="What is SignalR?",
                Answers="ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. SignalR can be used to add any sort of 'real-time' web functionality to your ASP.NET application. While chat is often used as an example, you can do a whole lot more. Any time a user refreshes a web page to see new data, or the page implements long polling to retrieve new data, it is a candidate for using SignalR. Examples include dashboards and monitoring applications, collaborative applications (such as simultaneous editing of documents), job progress updates, and real-time forms. SignalR also enables completely new types of web applications that require high frequency updates from the server, for example, real-time gaming. For a great example of this, see the ShootR game. SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers (and other client platforms) from server-side .NET code. SignalR also includes API for connection management (for instance, connect and disconnect events), and grouping connections."
            },

            new Description {
                ImageUrl="",
                Question="What is Web API?",
                Answers="In recent years, it has become clear that HTTP is not just for serving up HTML pages. It is also a powerful platform for building Web APIs, using a handful of verbs (GET, POST, and so forth) plus a few simple concepts such as URIs and headers. ASP.NET Web API is a set of components that simplify HTTP programming. Because it is built on top of the ASP.NET MVC runtime, Web API automatically handles the low-level transport details of HTTP. At the same time, Web API naturally exposes the HTTP programming model. In fact, one goal of Web API is to not abstract away the reality of HTTP. As a result, Web API is both flexible and easy to extend. In this hands-on lab, you will use Web API to build a simple REST API for a contact manager application. You will also build a client to consume the API. The REST architectural style has proven to be an effective way to leverage HTTP - although it is certainly not the only valid approach to HTTP. The contact manager will expose the RESTful for listing, adding and removing contacts, among others. This lab requires a basic understanding of HTTP, REST, and assumes you have a basic working knowledge of HTML, JavaScript, and jQuery."
            },


            new Description {
                ImageUrl="",
                Question="What is Angular 2?",
                Answers="Angular 2 is an open-source web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. The Angular 2 framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. According to JavaScript analytics service Libscore, Angular 2 is used on the websites of Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News, and approximately 8,400 other sites out of 1 million tested in July 2015.[2] Angular 2 is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js runtime environment."
            }

        };

     }
}

}

Answer 1

You need to import the map operator this way:

import 'rxjs/Rx';

or

import 'rxjs/add/operator/map';

See this question for more details:

• Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]